Когда я открываю модальный диалог twitter bootstrap, фон создает панель прокрутки и перемещает содержимое.
Чтобы избежать полосы прокрутки, я использую этот css:
.modal {
overflow: hidden;
}
Но я не могу избежать сдвига.
С уважением, Marko
Я использую Bootstrap Version 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);
Эти комбинированные разрешают исправление полосы прокрутки margin-right для работы на длинных страницах, но для более коротких страниц (когда высота документа <= высота окна) отключена. Надеюсь, это поможет!
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 .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');
}
});
});
Для меня работала только комбинация из двух ответов.
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;
}
Удачи всем!
лучший способ:
checkScrollbar, setScrollbar, resetScrollbar и measureScrollbar.Я добавил это в свой CSS и, похоже, работал, добавляя "фиксированный" наклад для просмотра
.modal-open {
margin-right: 15px;
}
Попробуйте этот простой javascript:
$j(document).ready(function() {
if ($(document).height() <= $(window).height()) {
$('body').css('margin-right','0','!important');
}
});
Вы должны попробовать это. это работает нормально.
$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');
})
})
Следующее включение в мой .css файл фиксировало мою центральную страницу содержимого при перемещении или изменении размера, когда отображается всплывающее модальное изображение.
Мне не нужен 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;
}