1.HTML代码：

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

2.CSS代码

3.js代码

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

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,系统默认的浏览器和微信，都能如愿执行，费了几个小时终于搞定啦

秒客网

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

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

相关文章

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

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

相关文章

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

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