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

最新推荐文章于 2023-08-15 07:52:18 发布

weixin_30299709

最新推荐文章于 2023-08-15 07:52:18 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/shisanjun/p/4813932.html

版权

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

转载于:https://www.cnblogs.com/shisanjun/p/4813932.html

weixin_30299709

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页常用动态效果--模态框

模态框的关键在于盒子定位，一个盒子遮住网页部分，此盒子绝对定位，宽高100%,实际高度为document高度；一个盒子为实际弹出框，固定定位在屏幕中央。html代码：<body> <button value="弹框">弹框</button> <br> <br>...
复制链接

扫一扫