1 //CSS 2 <style type="text/css"> 3 .mask 4 { 5 display: none; 6 position: absolute; 7 top: 0; 8 left: 0; 9 100%; 10 height: 100%; 11 background: #000; 12 z-index: 100; 13 -moz-opacity: 0.5; 14 opacity: .50; 15 filter: alpha(opacity=50); 16 height: 1000px; 17 } 18 .tanchu 19 { 20 600px; 21 height: 300px; 22 position: absolute; 23 top: 50%; 24 left: 50%; 25 margin: -150px 0 0 -300px; 26 z-index: 101; //弹出Z高度要高于mask层 27 background: white; 28 display: none; 29 } 30 .close 31 { 32 color: #fff; 33 cursor: pointer; 34 position: absolute; 35 top: 5px; 36 right: 5px; 37 margin-bottom: 5px; 38 color: Gray; 39 } 40 </style>
1 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 2 <script type="text/javascript"> 3 $(function () { 4 $(".input").click(function () { 5 $(".tanchu").show() 6 $(".mask").css({ display: "block", height: $(document).height() }); //获取高度，兼容IE6。如果不考虑IE6直接可以换成show() 7 }); 8 $(".close").click(function () { 9 $(".tanchu").hide(); 10 $(".mask").hide(); 11 return false; 12 }); 13 $(window).resize(function () { 14 $(".mask").css({ height: "100%", "100%" }); //窗口大小调整的时候，遮罩层要相应的调整 15 }); 16 }); 17 </script>
1 <body> 2 <div class="mask"> 3 </div> 4 <p> 5 <input class="input" type="button" style=" 100px; height: 30px;" value='弹 出' /></p> 6 <div class="tanchu"> 7 <a class="close">关闭</a> 8 <p> 9 我是一个弹出层我是一个弹出层我是一个七减五的弹出层 我是一个弹出层 我是一个弹出层</p> 10 </div> 11 </body