引导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元素来操纵overflow和padding样式。 这意味着你必须使用!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在这里
