当我打开twitter启动模式对话框，背景会导致滚动条和移动内容。
为了避免滚动条我使用这个css：
.modal {
overflow: hidden;
}
但我不能避免这种转变。
问候，
马可
我使用Bootstrap版本3
解决方法
Marko，
我只是有同样的问题。看起来Bootstrap 3.0.0在模式第一次显示时向< body>，modal-open添加了一个类。这个类将margin-right：15px添加到正文以考虑滚动条，这在较长的页面上。这是伟大的，除非较短的页面，当滚动条不在身体。在没有滚动条的情况下，margin-right导致身体在模态打开时向左移动。
我能够通过添加一些简短的Javascript和一些CSS解决这个问题：
CSS：
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal {
overflow-y: auto;
}
/* custom class to override .modal-open */
.modal-noscrollbar {
margin-right: 0 !important;
}
JS：
(function($) {
$(document)
.on( 'hidden.bs.modal','.modal',function() {
$(document.body).removeClass( 'modal-noscrollbar' );
})
.on( 'show.bs.modal',function() {
// Bootstrap adds margin-right: 15px to the body to account for a
// scrollbar,but this causes a "shift" when the document isn't tall
// enough to need a scrollbar; therefore,we disable the margin-right
// when it isn't needed.
if ( $(window).height() >= $(document).height() ) {
$(document.body).addClass( 'modal-noscrollbar' );
}
});
})(window.jQuery);
这些组合允许边缘右滚动条固定用于长页面，但对于较短页面(当文档高度<=窗口高度时)禁用。我希望这有帮助！ Bootstrap 3.0.1(测试到3.1.1)是一个不同的故事。尝试以下操作： CSS：
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal {
overflow-y: auto;
}
/* custom class to add space for scrollbar */
.modal-scrollbar {
margin-right: 15px;
}
JS：
(function($) {
$(document)
.on( 'hidden.bs.modal',function() {
$(document.body).removeClass( 'modal-scrollbar' );
})
.on( 'show.bs.modal',function() {
// Bootstrap's .modal-open class hides any scrollbar on the body,// so if there IS a scrollbar on the body at modal open time,then
// add a right margin to take its place.
if ( $(window).height() < $(document).height() ) {
$(document.body).addClass( 'modal-scrollbar' );
}
});
})(window.jQuery);
编辑：
鉴于Mac从居住窗口渲染宽度消除滚动条，这里是一个更便携的解决方案(3.0.1)，如果你不介意一些特征检测。参考：http://davidwalsh.name/detect-scrollbar-width
CSS：
.scrollbar-measure {
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
JS：
window.jQuery(function() {
// detect browser scroll bar width
var scrollDiv = $('<div class="scrollbar-measure"></div>')
.appendTo(document.body)[0],scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
$(document)
.on('hidden.bs.modal',function(evt) {
// use margin-right 0 for IE8
$(document.body).css('margin-right','');
})
.on('show.bs.modal',function() {
// When modal is shown,scrollbar on body disappears. In order not
// to experience a "shifting" effect,replace the scrollbar width
// with a right-margin on the body.
if ($(window).height() < $(document).height()) {
$(document.body).css('margin-right',scrollBarWidth + 'px');
}
});
});
