这是

body.modal-open {
   overflow: hidden !important;
}

Bootstrap的模态在模态对话框显示时自动将类modal-open添加到主体，并在对话框隐藏时将其删除。因此，您可以在CSS中添加以下内容:

body.modal-open {
    overflow: hidden;
}

你可能会说上面的代码属于Bootstrap CSS代码库，但这是一个简单的修复，可以将它添加到你的网站。

2013年2月8日更新 这在Twitter Bootstrap v. 2.3.0中已经停止工作——他们不再向主体添加modal-open类。

一个变通的方法是在模态即将显示时将类添加到主体中，并在模态关闭时将其删除:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013年3月11日更新 看起来modal-open类将在Bootstrap 3.0中返回，显式地用于防止滚动:

在body上重新引入。modal-open(这样我们就可以把滚动移到这里)

看这个:https://github.com/twitter/bootstrap/pull/6342 -看Modal部分。

这个问题已经解决， 解决方案:只需打开bootstrap .css并按以下方式更改

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

to

 body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  /*margin-right: 15px;*/
}

请查看下面的youtube视频，只有不到3分钟，你的问题将解决… https://www.youtube.com/watch?v=kX7wPNMob_E

这是我的香草JS解决方案基于@jpap jquery:

let bodyElement = document.getElementsByTagName('body')[0];

// lock body scroll
    let width = bodyElement.scrollWidth;
    bodyElement.classList.add('overflow-hidden');
    bodyElement.style.width = width + 'px';

// unlock body scroll
    bodyElement.classList.remove('overflow-hidden');
    bodyElement.style.width = 'auto';

这招对我很管用:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

这对我来说是最好的解决方案:

Css:

.modal {
     overflow-y: auto !important;
}

Js:

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}