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>
