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

首先我们需要判断模态框是否已经被调用，这里使用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 = '';
}

为什么我们不直接使用body的overflow:hidden呢？因为当我们使用这个样式的时候，页面会跳到最顶部，这在项目中的很不好的体验，而在fixedBody函数中添加的方法，既考虑到了只调用一次弹框的场景，又考虑到了多个弹框做切换时的场景。