Ответ 1
Добавьте $('body').css('overflow','hidden')
к своей функции, которая показывает модальную, и $('body').css('overflow','scroll')
к вашей функции, которая закрывает модальный.
У моей домашней страницы много контента. Когда я создаю любой модальный диалог, отображается полоса прокрутки тела, и когда мы прокручиваем ее, она прокручивается вниз до нижней части страницы.
В диалоговом окне мне также нужно отображать много контента. Итак, если я могу скрыть панель прокрутки тела и показать только модальную полосу прокрутки, это будет приятный пользовательский интерфейс.
Идея состоит в том, чтобы показывать модальный диалог и прокручиваемое содержимое поверх него, чтобы отключить полосу прокрутки главной страницы и показывать только полосу прокрутки для текущего видимого модального div.
Что мне нужно сделать, чтобы скрыть панель прокрутки тела и показать ее в модальном div.
Моя клиентская сторона полна JavaScript и jQuery.
Любые предложения были бы признательны!
Добавьте $('body').css('overflow','hidden')
к своей функции, которая показывает модальную, и $('body').css('overflow','scroll')
к вашей функции, которая закрывает модальный.
Когда я использовал $('body').css('overflow','scroll')
или $('body').css('overflow', 'inherit')
, полоса прокрутки появилась не в правом углу окна браузера, а на краю контейнера страницы...
Я знаю, что эта проблема из-за макетов и стилей CSS конкретного сайта, но в этом случае изменение стиля тега html кажется более универсальным:
$('html').css('overflow','hidden');
- скрыть полосу прокрутки$('html').css('overflow','scroll');
- показать полосу прокруткиЕсли вы обернете все содержимое вашего тела в обертке div с помощью overflow: hidden
, вы можете динамически установить высоту этого div, равную высоте видового экрана, когда вы откроете свой модальный диалог.
вы можете добавить это в bootstrap.js
Линия: 421
this.$element.hide(), this.backdrop(function() {
a.$body.removeClass("modal-open"),$('html').css('overflow','scroll'), a.resetAdjustments(), a.resetScrollbar(), a.$element.trigger("hidden.bs.modal")
})
Линия: 397
this.$element.trigger(e), this.isShown || e.isDefaultPrevented() || (this.isShown = !0, this.checkScrollbar(), this.setScrollbar(), this.$body.addClass("modal-open"), this.escape(), this.resize(), $('html').css('overflow','hidden'), this.$element.on("click.dismiss.bs.modal", '[data-dismiss="modal"]', a.proxy(this.hide, this)), this.backdrop(function()