模态框的实现 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>模态框的实现</title>
 6     <style>
 7     body{
 8         height: 1000px;
 9     }
10     .mask{
11         position:absolute;
12         left:0;
13         top:0;
14         width: 100%;
15         height: 100%;
16         z-index:100;
17         display: none;
18     }
19     .mask-box{
20         width: 100%;
21         height: 100%;
22         background: #000;
23         opacity:0.3;
24         position: absolute;
25         z-index: 3;
26     }
27     .mask-content{
28         position:absolute;
29         left:50%;
30         top:50%;
31         width:400px;
32         height:100px;
33         margin-left:-200px;
34         margin-top:-100px;
35         z-index:101;
36         background: #fff;
37     }
38     .mask-content .img-box{
39         width: 100%;
40         text-align: right;
41     }
42     .img-box img{
43         margin-right: 5px;
44         margin-top: 5px;
45     }
46     .close-btn:hover{
47         cursor:pointer;
48     }
49 </style>
50 </head>
51 <body>
52     <button>点击</button>
53     <div class="mask">
54         <div class="mask-box"></div>
55         <div class="mask-content">
56             <div class="img-box"><img src="img/close.png" class="close-btn"></div>
57             <hr>
58             <p>........</p>
59         </div>
60     </div>
61     <script src="jquery-3.2.1.min.js"></script>
62     <script>
63         /*
64         1.点击按钮时，要出现遮罩层和内容
65         2.遮罩层要遮住全部的内容，即要先隐藏滚动条
66         3.内容要出现在屏幕的正中央，css实现
67         4.当点击关闭按钮或点击遮罩层时，模态框关闭
68         */
69         
70         $("button").click(function(){
71            $('body').css('overflowY','hidden');
72            $(".mask").show();
73         });
74         $(".mask-box").click(function(e){
75             $('body').css('overflowY','scroll');
76             $('.mask').hide();
77         });
78         $(".close-btn").click(function(){
79             $('body').css('overflowY','scroll');
80             $(".mask").hide();
81         })
82     </script>
83 </body>
84 </html>

 

posted @ 2018-03-01 22:00  shuangcherry  阅读(843)  评论(0)    收藏  举报