前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js原生模态登录框

js原生模态登录框

作者头像
贵哥的编程之路
发布2020-10-28 10:23:54
8.6K0
发布2020-10-28 10:23:54
举报
文章被收录于专栏:用户7873631的专栏
代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档