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>

随机文章
Javascript知识点必读
最近更新