我怎样才能防止身体的滚动条,并在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个函数: checkScrollbarsetScrollbarresetScrollbarmeasureScrollbar

我添加了这个到我的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; }