我怎样才能防止身体的滚动条，并在twitter引导modal dialog加载时转移？
当我打开twitter bootstrap模式对话框时，背景会产生一个滚动条并移动内容。
为了避免滚动条我使用这个CSS：
.modal { overflow: hidden; } 但我无法避免这种转变。
问候，马可
我正在使用Bootstrap版本3
马尔科，
我只是有同样的问题。 看来Bootstrap 3.0.0会在模态第一次显示时向<body> ， modal-open添加一个类。 这个类增加了margin-right: 15px到身体来说明一个滚动条，这是在更长的页面上。 这是很好的，除了滚动条不在身上的较短的页面。 在没有滚动条的情况下，右边距使得身体在模态打开时向左移动。
我能够通过添加一些简短的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', '.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 +（testing到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', '.modal', function() { $(document.body).removeClass( 'modal-scrollbar' ); }) .on( 'show.bs.modal', '.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消除居住窗口渲染宽度的滚动条，如果您不介意某些function检测，则可以使用更便携的解决scheme（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', '.modal', function(evt) { // use margin-right 0 for IE8 $(document.body).css('margin-right', ''); }) .on('show.bs.modal', '.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'); } }); });
对于我来说，只有两个答案的组合工作。
CSS：
body { padding-right:0px !important; margin-right:0px !important; } body.modal-open { overflow: auto; }
笔：
body padding-right:0px !important margin-right:0px !important &.modal-open overflow: auto
尝试这个
body.modal-open { overflow: auto; }
矿在这里很容易（仅限CSS）：
body { padding-right:0px !important; margin-right:0px !important; }
事实是！重要的是从改变的填充和边距与模式公开的类和样式重叠的引导。
body { /*prevent modal background jumping*/ padding-right:0px !important; margin-right:0px !important; } /*prevent modal background jumping*/ body.modal-open { overflow: auto; }
当滚动条消失时，我遇到了同样的问题，当打开引导模式时，身体向左移动。
我发现了一个简单的解决方法：
.modal { overflow-y: auto !important; } .modal-open { overflow:auto !important; overflow-x:hidden !important; padding-right: 0 !important; }
祝你们好运！
最好的方法是：
- 添加到BODY overflow-y：scroll
- 并从bootstrap.js中删除4个函数：
checkScrollbar，setScrollbar，resetScrollbar和measureScrollbar。
我添加了这个到我的CSS，似乎工作时添加一个“固定”覆盖查看
.modal-open { margin-right: 15px; }
你应该试试这个。 这工作正常。
$j(document).ready(function() { $('.modal').on('show.bs.modal', function () { if ($(document).height() <= $(window).height()) { $('body').css('margin-right','0','!important'); } else { $('body').removeAttr('style'); } }) $('.modal').on('hide.bs.modal', function () { $('body').removeAttr('style'); }) })
试试这个简单的javascript：
$j(document).ready(function() { if ($(document).height() <= $(window).height()) { $('body').css('margin-right','0','!important'); } });
以下包含到我的.css文件固定我的中心内容页面移动或调整popup窗口模式时显示。
我不需要任何Javascript，只是下面的CSS代码。 这固定它的内容有或没有垂直或水平滚动条。
.modal { overflow-y: auto !important; } .modal-open { overflow: auto !important; overflow-x: hidden !important; padding-right: 15px !important; }
我正在使用bootstrap 3.3.7。
这就是全部：
.modal-open { overflow-y: scroll !important; padding-right: 0px !important; }
