JQuery 弹出层，始终显示在屏幕正中间 添加遮罩时禁止滚屏

 

 

1.HTML代码：

<div id="mask" class="mask"></div>
<a href="javascript:;" οnclick="showMask()" >点我显示遮罩层</a><br />
<a href="javascript:;" οnclick="letDivCenter('#model')">点我让DIV始终显示在屏幕中间</a><br />
<a href="javascript:;" οnclick="showAll('#model')">点我显示所有</a><br />
<div>
  　<div id="model" class="model">
     　　这是内容
　　</div>
</div>

2.CSS代码

<style type="text/css">
　　.mask {
　　　　position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
　　　　z-index: 1002; left: 0px;
　　　　opacity:0.5; -moz-opacity:0.5;
}
　　.model{
　　　　position: absolute; z-index: 1003;
　　　　width:320px; height:320px; text-align:center;
　　　　background-color:#0066FF; display: none;
}

</style>

3.js代码

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
　　//兼容火狐、IE8
　　function showMask(){
　　$("#mask").css("height",$(document).height());
　　$("#mask").css("width",$(document).width());
　　$("#mask").show();
}
//让指定的DIV始终显示在屏幕正中间
function letDivCenter(divName){
　　var top = ($(window).height() - $(divName).height())/2;
　　var left = ($(window).width() - $(divName).width())/2;
　　var scrollTop = $(document).scrollTop();
　　var scrollLeft = $(document).scrollLeft();
　　$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}
function showAll(divName){
　　showMask();
　　letDivCenter(divName);
}
</script>

 

以上可参考原著 http://blog.csdn.net/z69183787/article/details/8108641

 

添加遮罩时禁止滚屏 可参考http://www.cnblogs.com/licf/p/4691556.html

写页面经常会遇到弹出层，为了突显弹出层，一般会设一个遮罩

<div class="mask"></div>

遮罩层的样式为：

.mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
}

可是这时会有一个问题，就是即使给遮罩层设为跟屏幕一样高一样宽，但一滚轮或手动时底下的页面如超过一屏仍会滚，如果禁止呢？
有同学说这个不简单吗？直接给body设成100%高overflow:hidden就行了

以下代码：

document.body.style.overflow='hidden';

document.body.style.height='100%';

在chrome里一试，果然行，纹丝不动啊，太神奇了是不是？可是不能光在chrome里测啊，咱还得考虑有人用了火狐啊QQ啊欧朋啊，在火狐里一试，页面照样能滚，
真叫人皱眉头，不得已，继续搜，看有没有高见，又有同学说了把滚动条设为无，可是设为无只是不显示并不代表页面不滚哪，还有的说可以监听事件滚动的时候把scroolTop的值改为0，

　　window.onscroll= function (){

 　　  document.body.scrollTop = 0

　　}

试了一下好象也无济于事哎（或许是手机端的事件跟电脑端不同原因），忽然想既然chrome里行，火狐不行没准是兼容的问题，于是写了一条加上：

document.body.style.overflow='hidden';

document.body.style.height='100%';

document.documentElement.style.overflow='hidden'

再试火狐也ok了，原来真是兼容性问题，但我们项目是在微信里用的，还得在微信里测下，
据说微信调用浏览器，如果手机上安装了qq浏览器则会调用QQ浏览器，如果没有则调用系统自带的，在微信里一测，可以禁止滚动，但是在释放时不行了，
别的浏览器释放后能正常滚动，恢复到未弹出层时状态，就是页面超过一屏是可以滚动的，但是微信释放后也不能滚动了，这
可怎么办，前功尽弃了？只能再查，终于找到了，在touchmove时禁用浏览器默认事件，

document.addEventListener('touchmove', function (event) {

        event.preventDefault();

})

我只需要在遮罩弹出时禁用，遮罩关闭时释放，于是我改了下代码：

var aBtn=$('#a1');      //点击按钮
var guide=$('.guide');  //弹出的遮罩层
var flag=0; 　　　　　　  //标识，初始为0
aBtn.tap(function() {
    guide.css('display', 'block');  //显示遮罩
    flag=1;

});
document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件
    if(flag==1){　　　　　　　　　　　　　　　　　　　　　　　　　　　　//判断是遮罩显示时执行，禁止滚屏
        event.preventDefault();　　　　　　　　　　　　　　　　　　　//最关键的一句，禁止浏览器默认行为
    }
})
guide.tap(function(){
    guide.css('display','none'); 　　　　//隐藏遮罩
    flag=0;　　　　　　　　　　　　　　　　　//重置为0
});

这里我使用了zepto.js库，再测了下，火狐，chrome，opera,QQ,系统默认的浏览器和微信，都能如愿执行，费了几个小时终于搞定啦

 

转载于:https://www.cnblogs.com/camile/p/6133668.html