Mar*_*rko 35 css twitter-bootstrap bootstrap-modal twitter-bootstrap-3
当我打开twitter bootstrap模式对话框时,背景会导致滚动条并移动内容.
为了避免滚动条,我使用这个css:
.modal {
overflow: hidden;
}
但我无法避免这种转变.
问候,马可
我正在使用Bootstrap版本3
ian*_*tew 23
马尔科,
我刚遇到同样的问题.看来,引导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 +(测试高达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从居住的窗口渲染宽度中消除滚动条,如果您不介意某些特征检测,这里是一个更便携的解决方案(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');
}
});
});
obi*_*ahn 21
对我来说,只有两个答案的组合起作用.
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
Din*_*ivu 16
试试这个
body.modal-open {
overflow: auto;
}
小智 15
我很容易(仅限CSS):
body {
padding-right:0px !important;
margin-right:0px !important;
}
事实是!important是重叠的bootstrap与更改填充和边距与模态打开类和样式.
小智 5
我有同样的问题，滚动条消失，打开引导模式时身体向左移动。
我发现了一个简单的解决方法：
.modal
{
overflow-y: auto !important;
}
.modal-open
{
overflow:auto !important;
overflow-x:hidden !important;
padding-right: 0 !important;
}
祝你们好运！