网页常用动态效果--模态框

模态框的关键在于盒子定位，一个盒子遮住网页部分，此盒子绝对定位，宽高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>