引导3模态火灾并导致页面左移/浏览器滚动条问题

我正在使用Bootstrap 3.1.0的网站上工作。

你会注意到,当模式窗口打开时,浏览器滚动条瞬间消失,然后回来。 closures它也是一样的。

我怎样才能使它只是打开和closures没有浏览器滚动条交互。 我已经在堆栈上看到有人遇到问题的post,但是我找不到与我的问题有关的答案,所以如果其他人提出了这个请求,并且有人知道这个请求,并希望将其链接到我,它。 我已经search了大约2个小时,然后发布。

这是我在github中发现的,当我search这个问题,对我来说,它工作正常

JS:

$(document).ready(function () { $('.modal').on('show.bs.modal', function () { if ($(document).height() > $(window).height()) { // no-scroll $('body').addClass("modal-open-noscroll"); } else { $('body').removeClass("modal-open-noscroll"); } }); $('.modal').on('hide.bs.modal', function () { $('body').removeClass("modal-open-noscroll"); }); }) 

CSS使用这个CSS,如果你有导航固定顶部导航栏固定底部

 body.modal-open-noscroll { margin-right: 0!important; overflow: hidden; } .modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0!important; } 

或者如果你有navbar默认的用户这个CSS

 body.modal-open-noscroll { margin-right: 0!important; overflow: hidden; } .modal-open-noscroll .navbar-default, .modal-open .navbar-default { margin-right: 0!important; } 
 .modal { overflow-y: auto; } .modal-open { overflow: auto; } 

将摆脱它。 这是为了使模态更有效地工作,所以如果屏幕太短,您可以向下滚动并查看模态。 它也停止背景从一个模式启动时滚动。 如果你不需要这个function,那么你可以使用我发布的CSS。

一些更多的信息:他们设置。打开身体,这阻止了身体上的所有滚动和隐藏身体滚动条。 然后,当模式出现时,它有黑色的背景,占据了整个屏幕,并已溢出 – Y:滚动强制滚动条回来,所以如果模态扩展通过屏幕的底部,你仍然可以滚动黑暗的背景,并看到它的其余部分。

解决左移的问题很容易用CSS来完成。

 .modal-open[style] { padding-right: 0px !important; } 

你只是覆盖代码中存在的内联样式。 我正在使用我的WordPress构build和内联风格正在应用到身体。 看起来像这样:

 <body class="home blog logged-in modal-open" style="padding-right: 15px;"> 

希望这可以帮助别人!

 .modal { overflow-y: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; } 

感谢ben和cjd。

上面的代码似乎为我工作。

这是一个报告问题bootstrap: https : //github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复,也是使用固定顶级导航栏,只使用JavaScript的工作。 加载此脚本以及您的页面。

 $(document.body) .on('show.bs.modal', function () { if (this.clientHeight <= window.innerHeight) { return; } // Get scrollbar width var scrollbarWidth = getScrollBarWidth() if (scrollbarWidth) { $(document.body).css('padding-right', scrollbarWidth); $('.navbar-fixed-top').css('padding-right', scrollbarWidth); } }) .on('hidden.bs.modal', function () { $(document.body).css('padding-right', 0); $('.navbar-fixed-top').css('padding-right', 0); }); function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2); }; 

这里是工作的例子: http : //jsbin.com/oHiPIJi/64

如果您有固定的导航栏,并且不想在打开模式时将主体滚动到顶部,请使用此样式

 .modal-open { overflow: visible; } .modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right:0px!important; } 

3.3.4版本和3.3.5版本在这个页面中没有任何项目为我工作。添加这个CSS已经解决了我的问题。

 body { padding-right:0px !important; margin-right:0px !important; } 
 $('body').on('show.bs.modal', function () { if ($("body").innerHeight() > $(window).height()) { $("body").css("margin-right", "17px"); } }); $('body').on('hidden.bs.modal', function (e) { $("body").css("margin-right", "0px"); }); 

这个小小的修补程序模拟显示模式时的滚动条,为身体增加一个边距。

在我的情况下,body标签已经指定了overflow:hidden

当模式对话框打开时,它也添加padding-right:17px; 身体。

我的代码在这里

 .modal-open { overflow: hidden!important; padding-right:0!important } 

解决导致页面向右移动的问题

 html, body{ padding: 0 !important; } 
 html, body{ padding-right: 0px !important; position: relative!important; } 

从Bootstrap 3.3.2开始,行为似乎是当显示对话框时滚动条被删除,引导程序向body元素添加一些正确的填充以补偿先前由滚动条占用的空间。 不幸的是,这并不能防止屏幕移位,至less在Chrome,IE,Firefox或Safari的现代版本中。 这里没有一个解决scheme完全解决了这个问题,但是将来自ben.kaminski的答案和来自cjd82187的部分答案结合起来解决了只有CSS的问题:

 /* removes inline padding added by Boostrap that makes the screen shift left */ .modal-open[style] { padding-right: 0px !important; } /* keeps Bootstrap from removing the scrollbar if it's there */ .modal-open { overflow: auto; } 

正如ben.kaminski所提到的,代码被添加到Twitter Bootstrap中,所以如果超出了屏幕的底部,就可以滚动查看模式。 为了保留这个function,你可以在一个媒体查询中包装CSS解决scheme,所以它只适用于大视口,如下所示:

 @media (min-width: 992px) { .modal-open[style] { padding-right: 0px !important; } .modal-open { overflow: auto; } } 

当引导模式打开时,.modal-open类被设置为body标签。 在这个标签溢出:隐藏设置。 我们必须改变这一点。 在你的CSS中添加下面的代码。

 <style> body.modal-open { overflow: visible !important; } </style> 

参考: – 如何修复Bootstrap模态背景滚动到顶部

我的网页需要一个Agni Pradharma的代码的修改版本,以防止模式显示时,它的转移。 我有一个固定的导航头和一些页面滚动,有些没有。 在这里演示: http : //jsbin.com/gekenakoki/1/

我用了css:

 .modal { overflow-y: auto; } .modal-open { overflow: auto; } 

和脚本:

 $(document.body) .on('show.bs.modal', function () { if (this.clientHeight <= window.innerHeight) { return; } // Get scrollbar width var scrollbarWidth = getScrollBarWidth(); if (scrollbarWidth) { $(document.body).css('padding-left', scrollbarWidth); } }) .on('hidden.bs.modal', function () { $(document.body).css('padding-left', 0); }); function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2); }; 

如果有人碰巧使用了react-bootstrap那么解决scheme只是稍微复杂一点,因为react-bootstrap将内联样式应用于body元素来操纵overflowpadding样式。 这意味着你必须使用!important重写这些内联样式

 body.modal-open { // enable below if you want to additionally allow scrolling with the modal displayed // overflow: auto !important; // prevent the additional padding from being applied padding: 0 !important; } 

注意 :如果您没有启用滚动(即使滚动条可见)通过取消注释overflow样式,那么您的页面内容将显示移动的滚动条宽度(如果滚动条以前是可见的)。

我的JQuery解决scheme:

 var nb = $('nav.navbar-fixed-top'); $('.modal') .on('show.bs.modal', function () { nb.width(nb.width()); }) .on('hidden.bs.modal', function () { nb.width(nb.width('auto')); }); 

这个解决scheme适合我!

 .modal { overflow-y: auto; } .modal-open { overflow: auto; } .modal-open[style] { padding-right: 0px !important; } 

对于Bootstrap版本3.2.0,这个在css文件中的行填充修复错误:

 .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { padding-right: 17px; } 

解决scheme在这里