Ответ 1
Марко,
У меня была такая же проблема. Похоже, что 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');
}
});
});