如何在加载twitter引导模式对话框时防止正文滚动条和移动？ [英] How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?
问题描述
当我打开twitter启动模式对话框时，背景会导致滚动条并移动内容。
为了避免滚动条，我使用这个css：
.modal {
overflow：hidden;
}
但我不能避免这种转变。
问候，
Marko
我使用Bootstrap版本3
Marko，
我刚刚遇到同样的问题。看起来Bootstrap 3.0.0 向< body> ， modal-open ，当模态第一次显示。这个类添加 margin-right：15px 到身体以考虑滚动条，在较长的页面上。这是伟大的，除了较短的页面，当滚动条不在身体上。在没有滚动条的情况下，margin-right导致body在模态打开时向左移动。
我能够通过添加一些简短的Javascript和一些CSS来解决这个问题：
/ *覆盖Bootstrap 3类，从模态背景中移除滚动条
当不需要时* /
.modal {
overflow-y：auto;
}
/ *自定义类覆盖.modal-open * /
.modal-noscrollbar {
margin-right：0！important;
}
JS： b
（function（$）{
$（document）
.on（'hidden.bs.modal'， '.modal'，function（）{
$（document.body）.removeClass（'modal-noscrollbar'）;
}）
.on（'show.bs.modal'， '.modal'，function（）{
// Bootstrap将margin-right：15px添加到body以计入
//滚动条，但是当文档不是tall
//足够需要一个滚动条;因此，我们禁用margin-right
//当不需要时
if（$（window）.height（）> = $（document）.height（））{
$（document.body）.addClass（'modal-noscrollbar'）;
}
}）;
$ b b}）（window.jQuery）;
这些组合允许使用margin-right滚动条修正工作长页面， （当文档高度<=窗口高度时）。我希望这有助于！
Bootstrap 3.0.1 ）是一个不同的故事。尝试以下操作：
CSS：
/ * override override bootstrap 3类从模式背景中删除滚动条
当不需要时* /
.modal {
overflow-y：auto;
}
/ *自定义类添加滚动条的空间* /
.modal-scrollbar {
margin-right：15px;
}
JS： b
（function（$）{
$（document）
.on（'hidden.bs.modal'， '.modal'，function（）{
$（document.body）.removeClass（'modal-scrollbar'）;
}）
.on（'show.bs.modal'， '.modal'，function（）{
// Bootstrap的.modal-open类隐藏主体上的任何滚动条，
//所以如果在模态打开时有一个滚动条， b $ b //添加一个右边距来代替它
if（$（window）.height（）< $（document）.height（））{
$（document.body） .addClass（'modal-scrollbar'）;
}
}）;
}）（window.jQuery）;
EDIT / p>
由于Mac消除了窗口渲染宽度中的滚动条，如果你不介意某些特性检测，这里是一个更便携的解决方案（3.0.1+）。参考： http://davidwalsh.name/detect-scrollbar-width
CSS ：
.scrollbar-measure {
height：100px;
overflow：scroll;
position：absolute;
top：-9999px;
}
JS： b
window.jQuery（function（）{
//检测浏览器滚动条宽度
var scrollDiv = $（'< div class =scrollbar-measure>< / div>'）
.appendTo（document.body）[0]，
scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
$（document）
.on（'hidden.bs.modal'，'.modal'，function（evt）{
//使用margin-right 0 for IE8
$ document.body）.css（'margin-right'，''）;
}）
.on（'show.bs.modal'，'.modal'，function（）{
//当显示模式时，body上的滚动条消失。为了不让
//遇到移位效果，用body的右边距替换滚动条宽度
// b $ b if（$（window）.height（）< $（document）.height（））{
$（document.body）.css（'margin-right'，scrollBarWidth +'px'） ;
}
}）;
}）;
When I open the twitter bootstrap modal dialog, the backdrop causes a scrollbar and shift the content.
To avoid the scrollbar I use this css:
.modal { overflow: hidden; }But I can not avoid the shift.
regards, Marko
I am using Bootstrap Version 3
解决方案Marko,
I just had the same problem. It appears that Bootstrap 3.0.0 adds a class to
<body>,modal-open, when the modal first shows. This class addsmargin-right: 15pxto the body to account for a scrollbar, which is there on longer pages. This is great, except for shorter pages when a scrollbar isn't on the body. In the no scrollbar case, the margin-right causes the body to shift left on modal open.I was able to solve this by adding some short Javascript and a little 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);These combined permit the margin-right scrollbar fix to work for long pages, yet is disabled for shorter pages (when document height <= window height). I hope this helps!
Bootstrap 3.0.1+ (tested up to 3.1.1) is a different story. Try the following:
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);
EDIT:
In light of Mac eliminating scrollbars from inhabiting window render width, here's a more portable solution (3.0.1+) if you don't mind some feature detection. Reference: 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'); } }); });
这篇关于如何在加载twitter引导模式对话框时防止正文滚动条和移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
