Как скрыть полосу прокрутки тела при показе модального диалога?

У моей домашней страницы много контента. Когда я создаю любой модальный диалог, отображается полоса прокрутки тела, и когда мы прокручиваем ее, она прокручивается вниз до нижней части страницы.

В диалоговом окне мне также нужно отображать много контента. Итак, если я могу скрыть панель прокрутки тела и показать только модальную полосу прокрутки, это будет приятный пользовательский интерфейс.

Идея состоит в том, чтобы показывать модальный диалог и прокручиваемое содержимое поверх него, чтобы отключить полосу прокрутки главной страницы и показывать только полосу прокрутки для текущего видимого модального div.

Что мне нужно сделать, чтобы скрыть панель прокрутки тела и показать ее в модальном div.

Моя клиентская сторона полна JavaScript и jQuery.

Любые предложения были бы признательны!

ОТВЕТЫ

Ответ 1

Добавьте $('body').css('overflow','hidden') к своей функции, которая показывает модальную, и $('body').css('overflow','scroll') к вашей функции, которая закрывает модальный.

Ответ 2

Когда я использовал $('body').css('overflow','scroll') или $('body').css('overflow', 'inherit'), полоса прокрутки появилась не в правом углу окна браузера, а на краю контейнера страницы...

Я знаю, что эта проблема из-за макетов и стилей CSS конкретного сайта, но в этом случае изменение стиля тега html кажется более универсальным:

  • $('html').css('overflow','hidden'); - скрыть полосу прокрутки
  • $('html').css('overflow','scroll'); - показать полосу прокрутки

Ответ 3

Если вы обернете все содержимое вашего тела в обертке div с помощью overflow: hidden, вы можете динамически установить высоту этого div, равную высоте видового экрана, когда вы откроете свой модальный диалог.

Ответ 4

вы можете добавить это в 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()