模态框的关键在于盒子定位,一个盒子遮住网页部分,此盒子绝对定位,宽高100%,实际高度为document高度;一个盒子为实际弹出框,固定定位在屏幕中央。
html代码:
<body> <button value="弹框">弹框</button> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div class="down"></div> <div class="up"></div> </body>
css代码:
.down{ width:100%; height:100%; background: #000; opacity:0.5; position: absolute; top:0; left:0; z-index:99; display:none; } .up{ width:200px; height:300px; background: lightgoldenrodyellow; position: fixed; top:50%; margin-top:-150px; left:50%; margin-left:-100px; z-index:100; display:none; }
jq代码:
<script> $(function(){ var height = $(document).height(); $('.down').css({ height: height }); $('button').on('click',function(){ $('.down,.up').css('display','block'); }) }) </script>