html页面有弹出框时禁止页面（body）滚动

首先修改css样式，因为bootstrap modal组件会在弹出框弹出时，在body上加上modal-open 的 class，那我们只要修改modal-open样式即可，如果是其它插件，同时在背景滚动元素上加上class，然后加上position: fixed;也可达到同样效果

.modal-open{
  -webkit-overflow-scrolling:auto;
  position: fixed;
  z-index: 1;
}

加完以上样式，你就可以测试一下，页面底层在弹出框弹出后是否还能被滚动。

测试完毕后，我需要解决另一个问题：如果页面比较长，比如一篇比较长的文章，一开始弹出框并打开，我们在浏览文章时，已经滚动到页面比较下的位置，这里如果再点击打开弹出框，由于在弹出框显示的时候，我们给底层滚动的页面加上了position:fixed; 此时由于css 的top值未设定，所以底层滚动页面会被滚动到顶部。

此时我们需要修改的是给modal-open加上一个top值，而这个值是我们刚才页面滚动距离顶部的距离，但需要的是这个值的负数值，即如果页面滚动距离顶部1000，我们需要设置的top值却是-1000px

例：

// 解决botoomModal弹出后，body因为加上了fixed样式，回到顶部的问题，以下代码使得弹出框显示时，body任然保留在浏览时的位置
var offset = 0;
$('#myModal').on('show.bs.modal', function (event) {
    offset = $(window).scrollTop();
    console.log(offset);
    $('body').css('top',  '-'+offset+'px');
});

在关闭时，由于body上没有了modal-open的class，此时的top样式不会再生效，我们需要在关闭弹出框时，将页面再滚动到浏览位置

例：

// 当弹出框关闭时，fixed样式去掉后，将页面滚动到之前的浏览位置
$('#myModal').on('hidden.bs.modal', function (event) {
    console.log(offset); // 这里的offset是全局变量，所以会沿用上次的打开时的值
    $('body').css('top',  '0px'); // 这里是否重置top:0px意义不大，因为再次打开弹出框时，offset又被重新计算了，而些此时top值因为position不再是fixed,所以这里不会生效
    $(window).scrollTop(offset);
});

以上方法亲测有效，兼容IOS和安卓