bootstrap里模态框调用后禁止页面滚动

// 监听点击事件，来触发页面是否滚动
// 定义两个函数，来禁止滚动和释放页面滚动
$('.modal').on('show.bs.modal', function(e) {
stopScroll();
})

$('.modal').on('hidden.bs.modal', function(e) {
scrolling();
})

/**
* @method stopScroll 禁止页面滚动
* return 无
*/
function stopScroll () {
// 定义一个函数来给body添加fixed属性
fixedBody();
// 为了兼容移动端，我们还需要做一下判断
var bodyWidth = $('body').width();
// 并且给body添加modal-open类
$('body').addClass('modal-open');
// 判断如果是移动端
if (bodyWidth > 768) {
// 移动端padding-right记得设置为17px.
}
}

/**
* @method scrolling 还原页面滚动
* return 无
*/
function scrolling () {
// 定义一个函数来还原页面滚动
looseBody();
// 为了兼容移动端，我们还需要做一下判断
var bodyWidth = $('body').width();
// 并且给body删除modal-open类
$('body').removeClass('modal-open');
// 判断如果是移动端
if (bodyWidth > 768) {
// 移动端padding-right记得设置为0.
}
}

// 弹框出现的时候禁止滚动
function fixedBody(){
/*
在有的浏览器上有多次以上点击的时候(这时主要是因为弹框与弹框之间做切换时scrollTop会为0)，因为页面是不能 滚动的，所以document.body.scrollTop || document.documentElement.scrollTop为0，这时咱们需要 获取到当前body的top值
*/
var nowTop = Math.abs(document.body.style.top.split("p")[0]);
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
/*
只有在弹框出现的时候才有body的top值，弹框关闭的时候是没有的，第一次点击的时候会获取到为0的值，这个时 候，咱们应该取document.body.scrollTop || document.documentElement.scrollTop的值。再其他 时候当弹框关闭以后body的top会重置为“”.这个时候的值也是不可取的。但是如果有弹框出现的时候，我们就可以 获取此时的body的top值，用这个值来做模态框的位置固定
*/
if (nowTop !== "" && nowTop !== 0) {
scrollTop = nowTop
}
document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
}

// 弹框消失的时候取消禁止滚动效果
function looseBody() {
var body = document.body;
body.style.position = '';
var top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}