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>
- django使用xlwt导出excel文件
- redis的sentinel主从切换(failover)与Jedis线程池自动重连
- Hadoop通过HCatalog编写Mapreduce任务访问hive库中schema数据
- 伪排练:NLP灾难性遗忘的解决方案
- java优雅的使用elasticsearch api
- springboot mybatis优雅的添加多数据源
- java通过shield链接Elasticsearch
- 使用LSTM预测比特币价格
- Redis密码设置与访问限制(网络安全)
- Elasticsearch-sql 用SQL查询Elasticsearch
- python使用装饰器@函数式化django开发
- python 设计模式,“多”例模式
- 怎样把微信聊天记录导出备份到电脑【微信公众平台技巧】
- zookeeper curator选主(Leader)
- 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 数组属性和方法
- 啊,http2还没搞明白,http3又来了?
- 掌握Linux文件权限,看这篇就够了
- 【shell脚本入门到精通】基本规范及良好的编写习惯
- shell脚本的函数介绍使用和常用案例
- 详解shell脚本case条件语句,开发各种服务启动脚本跳板机
- 详解自动交互命令expect,免去手动输入!
- 快速掌握shell脚本的各种循环语句
- 详解shell脚本的4种表达式
- Linux shell中这7种运算命令值得掌握!
- 快速掌握shell脚本数组,看这篇
- 详解shell脚本的环境、普通、特殊变量
- 玩转zabbix之超详细的二进制安装
- 玩转zabbix之源码编译安装,添加主机监控
- 总结一篇shell调试技巧及常见的脚本错误
- 备战金九银十:当你裸辞遇到了面试难,你需要了解一下这些面试题