页面弹窗处理方案

需求

1、点击按钮弹窗

2、页面不可滚动

3、点击空白区域弹窗隐藏

直接上代码

<style>
//解决苹果手机上的QQ浏览器UC浏览器都点击body、document、window无效
body{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;cursor:pointer;}
.base_popup{position: fixed;width: 100%;}
</style>

//下面的代码是基于jQuery
var popScrollTop=0;
$('#protocolShowBtn').on('click',function(){
    //显示弹窗
    protocolPopBox.show();
    //获取当前滚动条top值
    popScrollTop=$(document).scrollTop();
    //添加class 
    $("body").addClass('base_popup');
    //设置class 
    $('body').css('top',-popScrollTop);
})
$(document).click(function () {
    //移除class
    $("body").removeClass('base_popup');
    //设置弹窗前滚动条的top值
    $(document).scrollTop(popScrollTop);
    //隐藏弹窗
    protocolPopBox.hide();
})

要点

1、利用固定定位fixed

2、在苹果手机上的QQ浏览器UC浏览器都点击body、document、window无效。网上搜了一遍找到的解决方案：body{cursor: pointer;}

3、移动端点击空白区域会闪一下蓝色，解决方案点击色值改成透明：body{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}