弹出层滚动问题解决代码 scroll 弹窗滚动穿透解决代码

最新推荐文章于 2021-12-13 16:01:20 发布

xzzhfei

最新推荐文章于 2021-12-13 16:01:20 发布

阅读量371

点赞数

分类专栏： php 文章标签：滚动弹出层 fixed定位 CSS控制 JavaScript事件监听

本文链接：https://blog.csdn.net/xzzhfei/article/details/120064792

版权

php 专栏收录该内容

19 篇文章 4 订阅

订阅专栏

话不多说，直接上代码


<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>弹出层外部禁用，内部可滚css控制up</title>

    <style type="text/css">
    body{
        margin: 0;
    }
    .container{
        width: 100%;
        overflow-y: scroll;
        /*position: relative;*/
    }
    .layer-title{
        width: 100%;
        margin: 50px 0 0;
        text-align: center;
    }
    .layer-action{
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }
    .btn{
        background-color: #08c;
        border: 0;
        color: #fff;
        height: 30px;
        line-height: 30px;
        width: 100px;
    }
    .text-center {
        text-align: center;
    }

    #underLayer{
        background-color: #eee;
        width: 90%;
        height: 500px;
        margin: 30px auto 1000px;
        text-align: center;
    }
    #underLayer p {
        line-height: 400px;
        margin: 0;
    }
    #underLayer .btn {
        margin: 20px auto;
    }

    #popupLayer{
        display: none;
        background-color: #fff;
        width: 80%;
        height: 200px;
        overflow: scroll;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -40%;
        margin-top: -100px;
        line-height: 1em;
        z-index: 1;
        /* for iOS */
        -webkit-overflow-scrolling: touch;
    }

    #bgMask{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
    }
    </style>
</head>
<body>
    <div class="container" id="mainContainer">
        <div id="underLayer">
            <p>底层元素</p>
            <button class="btn" id="openPopup">打开</button>
        </div>
        <p class="text-center">页面底部</p>
    </div>

    <div id="popupLayer">
        <div class="layer-title">弹出层</div>
        <br>滚<br>动<br>滚<br>动<br>滚<br>动<br>滚<br>动
        <div class="layer-action">
            <button class="btn" id="closePopup">关闭</button>
        </div>
        <br>ha<br>ha<br>ha<br>ha<br>ha<br>ha<br>ha<br>到底了
    </div>
    <div id="bgMask"></div>


    <script type="text/javascript" src="//cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script type="text/javascript">
    Zepto(function($){

        $('#openPopup').on('click', function(){
            $('#popupLayer').show();
            $('#bgMask').show();

            $('#mainContainer').css('position', 'fixed');
        });

        $('#closePopup').on('click', function(e){
            $('#popupLayer').hide();
            $('#bgMask').hide();

            $('#mainContainer').css('position', 'static');
        });

    });
    </script>
</body>
</html>

xzzhfei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出层滚动问题解决代码 scroll 弹窗滚动穿透解决代码

话不多说，直接上代码<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
复制链接

扫一扫

专栏目录