首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端弹框后禁用页面滑动

移动端弹框后禁用页面滑动

作者头像
用户1174387
发布2018-01-17 12:03:02
2.3K0
发布2018-01-17 12:03:02
举报
文章被收录于专栏:web开发web开发

在web开发中,有时候我们需要实现在页面上点击某个按钮弹出窗口,并禁用页面滑动或滚动的需求。以下是我本人的做法,望大家多多提出意见或建议。

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端弹框禁止背景滑动</title>
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="../lib/swiper/dist/css/swiper.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no;">
    <script src="../lib/swiper/dist/js/swiper.min.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <style>
        * {
            font-size: 0.35rem;
            line-height: 0.6rem;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        html, body {
            height: 100%;
            min-width: 320px;
            max-width: 750px;
            margin: 0 auto;
            background-color: #eee;
            width: 100%;
        }
        .layout {
            background-color: #fff;
            padding: 0.2rem;
        }
        .shade {
            height: 100%;
            width: 100%;
            background-color: rgba(0,0,0,0.6);
            position: fixed;
            top: 0;
            left: 0;
            z-index:300;
            display: none
        }
        .tankuang {
            width: 80%;
            height: 4rem;
            background-color: #fff;
            position: fixed;
            left: 10%;
            top: 50%;
            margin-top: -2rem;
            border-radius: 5px;
            z-index: 400;
            display: none;
        }
        .tankuang .content {
            height: 3.2rem;
            overflow: auto;
            margin: 0.6rem 0.2rem 0.2rem 0.2rem;
        }
        .tankuang .close-btn {
            width: 0.5rem;
            height: 0.5rem;
            text-align: center;
            line-height: 0.5rem;
            font-size: 0.5rem;
            position: absolute;
            right: 0;
            top: 0;
        }
        .top {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 0.8rem;
            z-index: 200;
            text-align: center;
            color: #fff;
            font: normal 0.3rem/0.8rem 'Microsoft YaHei';
        }
        .top div {
            position: relative;
            min-width: 320px;
            max-width: 750px;
            margin: 0 auto;
            height: 0.8rem;
            line-height: 0.8rem;
            background-color: rgba(0,0,0,0.7);
            border-bottom: 1px solid #ccc;
        }
        .banner {
            min-width: 320px;
            max-width: 750px;
            height: 3rem;
        }
        .banner a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .banner a img {
            width: 100%;
            height: 100%;
        }
        @media (max-width: 750px) {
            .swiper-button-prev, .swiper-button-next {
                display: none;
            }
        }

    </style>
</head>
<body style="padding-top: 0.8rem;position: relative;">
    <div class="top">
        <div>顶部固定定位部分</div>
    </div>
    <div class="banner" id="banner" style="overflow: hidden;">
        <div class="swiper-container" style="height: 100%;overflow: hidden;">
            <div class="swiper-wrapper">
                <div class="swiper-slide b-item">
                    <a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=3115">
                        <img src="http://cdn.img.mtedu.com/upload/images/course/86/7f/bf/867fbf2b26cf0a1ba4505d6ea9e82193.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide b-item">
                    <a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=216">
                        <img src="http://cdn.img.mtedu.com/sale/images/20170614151112_725215.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide b-item">
                    <a href="http://test.m.course.mtedu.com/pages/course-v2.html?course_id=215">
                        <img src="http://cdn.img.mtedu.com/sale/images/20170608193416_543505.jpg" alt="">
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" style="width: 0.25rem;height: 0.4rem;background-size: contain;margin-top: -0.2rem;"></div>
            <div class="swiper-button-next" style="width: 0.25rem;height: 0.4rem;background-size: contain;margin-top: -0.2rem;"></div>

            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>
    </div>
    <div class="layout">
        <div>
            <p>转岗问题分析在不少互联网公司,产品运营做的事情,就是搞搞活动,做做内容编辑,管理一下社区,</p>
            <p>做一些用户沟通交流,联络应用商店德国渠道进行产品发布,更加深入一点,就收集数据进行分析,也就是通常说的:活动运营、内容运营、社区运营、用户运营等工作。
                于是,有人问,如何从产品运营转产品经理?</p>
            <p>BLUES回答过不少这样的提问。这里先不解答,直接看看下面的两张图,来自于腾讯的产品职级体系,3级职业等,就是俗话说的3-1</p>
            <p>答案其实很明显,上图是产品策划的能力体系,下图是产品运营的能力体系。
                在腾讯公司,产品策划和产品运营,都是产品经理体系,只是各有偏重。到了3-1,3级职业等,都称为高级产品经理。
                最大的差别在于:产品策划需要具备专业设计能力。
                在职业通道里面,专业设计能力的描述是:依据用户使用场景,使用相关专业领域的知识、工具和技巧,设计出满足甚至超出用户预期的功能特性。
                专业设计能力的评价标准:
                对于某专业策划设计领域有较深厚的经验积累,能在自己专业设计角度上极大的促进产品整体品质的提升,能指导别</p>
            <p>中独立主导完成的中型策划设计项目的规划和成果报告;
                提交自己撰写的相关专业领域的培训课件或者经验分享材料
                产品运营比产品策划要求更高的能力是:
                运营数据分析
                市场营销
                对外商务沟通</p>
            <input type="button" id="btn" value="弹框1"/>
            <input type="button" id="btn2" value="弹框2"/>
            <h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>ert1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1ry</h1>
            <h1>1</h1><h1>1</h1><h1>1bfd</h1><h1>1</h1><h1>1ryer</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1>
            <h1>1</h1><h1>1</h1><h1>1234</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1hdfh</h1><h1>1</h1><h1>1dg</h1><h1>1</h1>
        </div>
    </div>
    <!--遮罩层-->
    <div class="shade" id="shade"></div>

    <!--弹框1-->
    <div class="tankuang" id="tankuang">
        <div class="content">
            <p>转岗问题分析在不少互联网公司,产品运营做的事情,就是搞搞活动,做做内容编辑,管理一下社区,</p>
            <p>做一些用户沟通交流,联络应用商店德国渠道进行产品发布,更加深入一点,就收集数据进行分析,也就是通常说的:活动运营、内容运营、社区运营、用户运营等工作。
                于是,有人问,如何从产品运营转产品经理?</p>
            <p>BLUES回答过不少这样的提问。这里先不解答,直接看看下面的两张图,来自于腾讯的产品职级体系,3级职业等,就是俗话说的3-1</p>
            <p>答案其实很明显,上图是产品策划的能力体系,下图是产品运营的能力体系。
                在腾讯公司,产品策划和产品运营,都是产品经理体系,只是各有偏重。到了3-1,3级职业等,都称为高级产品经理。
                最大的差别在于:产品策划需要具备专业设计能力。
                在职业通道里面,专业设计能力的描述是:依据用户使用场景,使用相关专业领域的知识、工具和技巧,设计出满足甚至超出用户预期的功能特性。
                专业设计能力的评价标准:
                对于某专业策划设计领域有较深厚的经验积累,能在自己专业设计角度上极大的促进产品整体品质的提升,能指导别</p>
            <p>中独立主导完成的中型策划设计项目的规划和成果报告;
                提交自己撰写的相关专业领域的培训课件或者经验分享材料
                产品运营比产品策划要求更高的能力是:
                运营数据分析
                市场营销
                对外商务沟通</p>
        </div>
        <div class="close-btn" id="close">×</div>
    </div>

    <!--弹框2-->
    <div class="tankuang tankuang2" id="tankuang2" style="height: 2rem;text-align: center;margin-top: -1rem;">
        <div style="height: 1.2rem;line-height: 1.2rem;">
            确定要如此操作吗?
        </div>
        <div style="height: 0.8rem;">
            <div id="cancel" style="float: left;width: 50%;height: 100%;line-height: 0.8rem;font-size: 0.3rem;border-top: 1px solid #ccc;">
                取消
            </div>
            <div id="sure" style="float: left;width: 50%;height: 100%;line-height: 0.8rem;font-size: 0.3rem;background-color: red;color: #fff;border-bottom-right-radius: 4px;">
                确定
            </div>
        </div>
    </div>
<script>
    new function (){
        var _self =  this ;
        _self.width = 750; // 设置默认最大宽度
        _self.fontSize = 100; // 默认字体大小
        _self.widthProportion =  function (){
            var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<(32/75)?(32/75):p;
        };
        _self.changePage =  function (){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
        }
        _self.changePage();
        window.addEventListener('resize', function (){_self.changePage();}, false );
    };

    var scroolTop = 0;
    /*弹出弹框*/
    $('#btn').click(function () {
        scroolTop = $(document).scrollTop();
        console.log(scroolTop);
        $('body').css({
            'position':'fixed',
            'top':'-'+scroolTop+'px',
        });
        $('#shade').css('display','block');
        $('#tankuang').css('display','block');
    });

    /*关闭弹框*/
    $('#close').click(function () {
        $('body').css({
            'position':'relative',
            'top':'0'
        });
        $(document).scrollTop(scroolTop)
        $('#shade').css('display','none');
        $('#tankuang').css('display','none');
    });

    /*点击区域*/
    $('#shade').click(function () {
        $('#close').click();
    })


    /*弹出弹框*/
    $('#btn2').click(function () {
        scroolTop = $(document).scrollTop();
        $('body').css({
            'position':'fixed',
            'top':'-'+scroolTop+'px'
        });
        $('#shade').css('display','block');
        $('#tankuang2').css('display','block');
    });
    /*关闭弹框*/
    $('#cancel, #sure').click(function () {
        $('body').css({
            'position':'relative',
            'top':'0'
        });
        $(document).scrollTop(scroolTop)
        $('#shade').css('display','none');
        $('#tankuang2').css('display','none');
    });
    /*点击区域*/
    $('#shade').click(function () {
        $('#cancel').click();
    })

    /*点击确定*/
    $('#sure').click(function () {
        console.log('已经确定');
    });

    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,
        effect:'slide',  //切换效果,默认为"slide"(位移切换),fade(淡入) cube(方块) coverflow(3d流) flip(3d翻转)
        autoplay: 3000,//可选选项,自动滑动
        pagination: '.swiper-pagination',// 如果需要分页器
        paginationClickable:true,   //true:可点击切换,false:不可点击
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
//        scrollbar: '.swiper-scrollbar',   // 如果需要滚动条
    })
    //鼠标经过,停止轮播
    document.getElementsByClassName('swiper-container')[0].onmouseover = function () {
        mySwiper.stopAutoplay();
    }
    //鼠标离开,继续轮播
    document.getElementsByClassName('swiper-container')[0].onmouseout  = function () {
        mySwiper.startAutoplay();
    }
    //手指从屏幕上离开,继续轮播
    document.getElementsByClassName('swiper-container')[0].addEventListener('touchend',function () {
        mySwiper.startAutoplay();
    });
    //修改分页器的click事件为mouseover事件
//    $('.swiper-container .swiper-pagination').on('mouseover', 'span', function (){
//        var index = $(this).index();
//        console.log(index+1);
//        mySwiper.slideTo(index+1);
//    });
</script>
</body>
</html>

效果图:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-07-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档