html 弹出模态窗口 控制背景层不能滚动

第一种方案
这个方案比较简单，适用弹出窗口内也没有内容需要滚动的时候

1 即在弹出窗口的时候 给body绑定 mouchmove事件 阻止响应
$("body").on('touchmove',function(event) { event.preventDefault(); }, false);

2 关闭弹出层的时候解绑事件
$("body").unbind('touchmove');


第二种方案
这里相对复杂一些，适用于弹窗里有内容需要滚动的时候

弹窗时
1 弹窗的时候先获取 当前滚动条滚动的 offset值
var topN = -($("body").scrollTop());//获取滚动的位置
2 给body层加css属性 position 设置为 fixed固定的
$("body").css('position', 'fixed');
这时候背景层已经不能滚动了，但是背景层的滚动条已经回滚到顶部位置，所以这里需要第三步

3 $("body").css('top', topN);//
设置top值，使页面相当于滚动了，这时候的显示情况恢复到弹窗前的样子

关闭弹窗时
1 获取弹窗时设置的 body 的css属性 top值
var scrollTop = parseInt($("body").css('top').replace('px',''));
2 body的 position属性恢复 这时候页面会跳回顶部
$("body").css('position', '');
3 $("body").css('top', 0); top值设为0
4 $("body").scrollTop(-scrollTop);//滚动滚动条，页面不会跳回顶部

ok 搞定