弹出层案例
弹出层图片：
1、 弹出层由两个部分组成：灰色透明的遮罩、弹出框
2、 遮罩的宽高是整个屏幕的宽高，采用固态定位；而弹出框也采用固态定位。
3、 弹出框比遮罩层级高，且始终居中显示。
4、 使用场景：注册、登录；统一的消息提示框；减少页面跳转、刷新的一些操作。
实现代码如下：
（1）html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/弹出层.css"> 7 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 8 </head> 9 <body> 10 <div id="login" class="login">登录</div> 11 <!-- 遮罩 --> 12 <div id="layer-mask" class="layer-mask"></div> 13 <!-- 弹出框 --> 14 <div id="layer-pop" class="layer-pop"> 15 <!-- 关闭按钮 --> 16 <div id="layer-close" class="layer-close">x</div> 17 <!-- 弹出框 --> 18 <div id="layer-content" class="layer-content"> 19 <!-- 弹出框中的内容 --> 20 <div class="login"> 21 <h4 class="title">登录</h4> 22 <div class="item"> 23 <label for="">账号</label> 24 <input type="text" id="username" class="input" name="username"/> 25 <p class="error-msg"></p> 26 </div> 27 <div class="item"> 28 <label for="">密码</label> 29 <input type="password" id="password" class="input" name="password"/> 30 <p class="error-msg"></p> 31 </div> 32 <div class="item"> 33 <input type="submit" id="loginSubmitBtn" class="submit" value="填写好了"/> 34 </div> 35 </div> 36 </div> 37 </div> 38 <script type="text/javascript" src="js/弹出层.js"></script> 39 </body> 40 </html>
css样式：
1 #login { 2 cursor: pointer; 3 } 4 /* 遮罩样式 */ 5 .layer-mask { 6 z-index: 99; 7 position:fixed; 8 top:0; 9 left:0; 10 width:100%; 11 height:100%; 12 background-color: #000; 13 opacity:0.5; 14 display: none; 15 } 16 /* 弹出框样式 */ 17 .layer-pop { 18 z-index:1000; 19 position:fixed; 20 top:0; 21 left:0; 22 bottom:0; 23 right:0; 24 margin:auto; 25 width:400px; 26 height: 300px; 27 background-color: #FFFFFF; 28 display: none; 29 } 30 /* 关闭按钮 */ 31 .layer-close { 32 float:right; 33 width:24px; 34 height: 24px; 35 border:3px solid #fff; 36 text-align: center; 37 line-height:24px; 38 border-radius: 50%; 39 background:#eee; 40 color:lightgray; 41 margin-right:-7px; 42 margin-top:-7px; 43 } 44 .layer-close:hover { 45 cursor: pointer; 46 background:#ccc; 47 color:#fff; 48 } 49 /* 弹出框中的样式 */ 50 .login {text-align: center;} 51 .login h4 {font-size:20px;line-height: 50px;} 52 .login label {margin-right: 10px;color:#888;} 53 .login .input { 54 border:1px solid #ccc; 55 border-radius: 3px; 56 padding:10px 5px; 57 width:240px; 58 } 59 .login .item {margin:10px auto;} 60 .login .submit { 61 width: 240px; 62 height:40px; 63 color:#fff; 64 background-color:#e40; 65 border:1px solid #e40; 66 border-radius: 5px; 67 margin-right: -45px; 68 } 69 .login .error-msg {color:#e40;}
js代码：
1 $(function(){ 2 $("#login").click(function() { 3 $("#layer-mask").show(); 4 $("#layer-pop").show(); 5 $("#layer-close").click(function(){ 6 $("#layer-mask").hide(); 7 $("#layer-pop").hide(); 8 }); 9 }); 10 });
结果：
