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

Ответ 1

Я столкнулся с той же самой проблемой, используя UI Bootstrap, и придумал что-то вроде обходного пути. При открытии модальности вы добавляете в тело класс (.ovh), который переводит переполнение в скрытое. При закрытии/отмене модальности вы удаляете этот класс, чтобы прокрутка была возможна снова.

Смотрите мою вилку своей скрипки здесь: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview

Заметьте, что я поместил класс в index.html, только для демонстрационных целей. Кроме того, я ввел определение $document в определение контроллера, чтобы использовать ссылку, предоставленную angular.

Ответ 2

Небольшая модификация dreamhigh ответа, которая хорошо работала для меня, включала добавление позиции: исправлено для устройств iOS:

body.modal-open {
    position: fixed;
    overflow: hidden;
}

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Кредит на эту должность: Bootstrap 3: горизонтальная полоса прокрутки на iPhone после фокуса формы

С этими двумя изменениями я смог получить модальные формы с угловыми модулями, чтобы вести себя хорошо на iOS.

Ответ 3

Для тех, кто использует Angular JS и UT Bootstrap. Вот что мне потребовалось, чтобы заставить его работать. Моя ситуация была немного иной. У меня был Modal, который работал и отлично прокручивался. Затем у меня была кнопка на этом модале, которая бы вышла бы еще одним модальным. Как только этот второй модальный был закрыт, исходный модал больше не будет прокручиваться. Это все, что нужно:

.modal.in {
  overflow-x: hidden;
  overflow-y: auto;
}

Ответ 4

Я просто ставлю ниже CSS, и теперь прокрутка тела скрыта всякий раз, когда открывается модальное всплывающее окно. Я использую Angular UI Bootstrap.

.modal-open {
  overflow: hidden !important;
  position: relative
}

Ответ 5

Когда вы добавляете переполнение: скрыто, прокрутка фоновой страницы скрыта. Тем не менее, модальная прокрутка будет видна как прокрутка страницы, а модальная будет установлена ​​для прокрутки.

body.modal-open {
    overflow: hidden;
}

Ответ 6

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

  this.backdrop(function () {
  var transition = $.support.transition && that.$element.hasClass('fade')

  if (!that.$element.parent().length) {
    that.$element.appendTo(that.$body) // don't move modals dom position
  }

  that.$element
    .show()
    .scrollTop(0)

  if (that.options.backdrop) that.adjustBackdrop()
  that.adjustDialog()

  if (transition) {
    that.$element[0].offsetWidth // force reflow
  }

  that.$element
    .addClass('in')
    .attr('aria-hidden', false)

  //that.enforceFocus()

Ответ 7

Для меня страница прокручивается, когда диалог закрывается, поэтому я исправил файл ui-bootstrap-tpls.js. Фактическая проблема заключается в том, что при отключении модального метода removeModalWindow вызывается с параметрами "modalInstance" и "modalWindow.value.modalOpener".

Второй параметр используется для фокусировки на элементе, который запускает модальное окно. Просто удалите второй параметр в функции "увольнение" и "закрыть", и ваш эффект прокрутки страницы будет разрешен.

'removeModalWindow (modalInstance, modalWindow.value.modalOpener)' становится 'removeModalWindow (modalInstance)'