js原生模态登录框
时间:2022-07-28
本文章向大家介绍js原生模态登录框，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style type="text/css">
*{padding: 0px;margin:0px;}
:root
{
--modal-duration: 2s;
--primary-color: #30336b;
--secondary-color: #be2edd;
}
body
{
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: transform 0.5s ease;
}
body.show-nav {
transform: translateX(200px);
}
nav
{
background-color: var(--primary-color);
color: #fff;
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 100vh;
z-index:100;
transform: translateX(-100%);
}
nav .logo {
padding: 30px 0;
text-align: center;
}
nav .logo img
{
width: 75px;
height: 75px;
}
nav ul
{
list-style: none;
}
nav ul li
{
border-bottom: 2px solid rgba(200, 200, 200, 0.1);
padding: 20px;
}
nav ul li:first-of-type {
border-top: 2px solid rgba(200, 200, 200, 0.1);
}
nav ul li a
{
color: #fff;
text-decoration: none;
}
nav ul li a:hover
{
text-decoration: underline;
}
header
{
background-color: var(--primary-color);
color: #fff;
text-align: center;
padding: 40px 15px;
position: relative;
font-size: 130%;
}header p {
margin: 30px 0;
}
button,input[type="submit"]
{
background-color: var(--secondary-color);
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 12px;
border: 0;
}
button:focus
{
outline: none;
}
.toggle {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 20px;
left: 20px;
}
.cta-btn
{
padding: 12px 30px;
font-size: 20px;
}
.container{
padding: 15px;
margin: 0px auto;
max-width: 100%;
width: 800px;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.modal-container.show-modal {
display: block;
}
.modal
{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header {
background-color: var(--primary-color);
color: #fff;
padding: 15px;
}
.close-btn {
background-color: transparent;
position: absolute;
top: 0;
right: 0;
font-size: 25px;
}
.modal-content {
padding: 20px;
}
.modal-form div {
margin: 15px 0;
}
.modal-form label {
display: block;
margin-bottom: 5px;
}
.modal-form .form-input {
padding: 8px;
width: 100%;
}
@keyframes modalopen
{
from
{
opacity: 0;
}
to{
opacity: 1;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="img/img.png" alt="logo">
</div>
<ul>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
</ul>
</nav>
<header>
<button class="toggle" id="toggle">
<i class="fa fa-bars fa-2x"></i>
</button>
<h1>666</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis,
quisquam!
</p>
<button class="cta-btn" id="open">登录</button>
</header>
<div class="container">
<h1>为什么选择米修在线？</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia,
repellendus magnam enim dolorem alias adipisci commodi eum. Aspernatur
debitis expedita rem itaque dolor! Obcaecati unde aliquam mollitia alias
maxime.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum iure
consequuntur labore eaque repellendus, impedit obcaecati ut veritatis ab
sapiente.
</p>
<h2>我们的教学宗旨</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam!
Officiis non quidem, nobis dolorum, illo, vel tenetur officia tempora
error molestiae nostrum quis libero odit omnis ratione fuga voluptatum
obcaecati vero impedit aliquid nihil doloribus dolorem. Commodi, beatae
provident!
</p>
<h2>我们的优势</h2>
<ul>
<li>丰富的线上课程</li>
<li>优秀的师资团队</li>
<li>课后辅导及问答</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit modi
facere non, rem est officia similique? Exercitationem alias provident
magni optio veritatis, eligendi modi saepe ut eum expedita dolorem
corrupti. Quis, iste. Ullam sit minima officiis animi a saepe modi,
repellat reprehenderit eveniet molestias corporis cupiditate optio nemo
dolorem adipisci quis voluptates dolorum molestiae delectus deleniti
ducimus mollitia neque aliquid. Delectus a, perferendis vitae omnis est
molestiae voluptates mollitia? Cumque?
</p>
</div>
<!--模态框-->
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="modal-header">
<h3>登录</h3>
</div>
<div class="modal-content">
<p>登录了解更多课程及促销活动</p>
<form class="modal-form">
<div>
<label for="name"></label>
<input type="text" name="" id="name" placeholder="请输入姓名" class="form-input">
</div>
<div>
<label for="email">邮箱</label>
<input
type="email"
id="email"
placeholder="请输入邮箱"
class="form-input"
/>
</div>
<div>
<label for="password">密码</label>
<input
type="password"
id="password"
placeholder="请输入密码"
class="form-input"
/>
</div>
<div>
<label for="password2">确认密码</label>
<input
type="password"
id="password2"
placeholder="请再次输入密码"
class="form-input"
/>
</div>
<input type="submit" value="提交" class="submit-btn" />
</form>
</div>
</div>
</div>
<script type="text/javascript">
// 获取节点
const toggle = document.getElementById("toggle");
const close = document.getElementById("close");
const open = document.getElementById("open");
const modal = document.getElementById("modal");
window.addEventListener("click",e=>
{
e.target==modal?modal.classList.remove("show-modal"):false;
/*点击的是不是modaldiv,如果是就模态框消失,否则上面都不做。*/
});
toggle.addEventListener("click",()=>
{
document.body.classList.toggle("show-nav");
//如果按下了按钮就显示nav否则切换不见nav
});
open.addEventListener("click",()=>
{
modal.classList.add("show-modal");
//如果点击的是登录按钮就显示模态框
});
close.addEventListener("click",()=>
{
modal.classList.remove("show-modal");
//如果点击的是模态框上面的x的话,也消失掉.
});
</script>
</body>
</html>
- day4、Linux基础题目
- 命令行执行Django脚本的方法
- Spring Security笔记：Hello World
- day5、文件乱码怎么解决
- javascript计算对象的长度
- Spring 4.0.2 学习笔记(2) - 自动注入及properties文件的使用
- day6、Linux下如何找出7天以前的文件删除
- django模板语法之include
- day7、用户登陆出现-bash-4.1$错误的原因
- Django--admin源码流程
- Spring Security笔记：Remember Me(下次自动登录)
- day8、 显示Linux路由表、各列信息
- day9、用户登陆出现-bash-4.1$错误的原因及解决方法
- jboss eap 6.3 域(Domain)模式配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法