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

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

 

posted @ 2015-09-16 17:31  十三君  阅读(451)  评论(0)  编辑  收藏  举报