Я использую Angular UI Bootstrap Модальный блок. Когда модальный открывает тело, есть свиток. Когда я прокручиваю содержимое позади модального, также прокручивается.
Я могу установить переполнение: скрыто в теге body, и это решает проблему. Однако, если у меня есть много контента в моем модальном формате, мне нужен свиток для показа. Этот прокрутки не должен находиться внутри модального i.e Когда я использую прокрутку страницы, модальный должен только прокручивать, а не контент. Plunker здесь
Я столкнулся с той же самой проблемой, используя UI Bootstrap, и придумал что-то вроде обходного пути. При открытии модальности вы добавляете в тело класс (.ovh), который переводит переполнение в скрытое. При закрытии/отмене модальности вы удаляете этот класс, чтобы прокрутка была возможна снова.
Смотрите мою вилку своей скрипки здесь: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview
Заметьте, что я поместил класс в index.html, только для демонстрационных целей. Кроме того, я ввел определение $document в определение контроллера, чтобы использовать ссылку, предоставленную angular.
Небольшая модификация 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.
Для тех, кто использует Angular JS и UT Bootstrap. Вот что мне потребовалось, чтобы заставить его работать. Моя ситуация была немного иной. У меня был Modal, который работал и отлично прокручивался. Затем у меня была кнопка на этом модале, которая бы вышла бы еще одним модальным. Как только этот второй модальный был закрыт, исходный модал больше не будет прокручиваться. Это все, что нужно:
.modal.in {
overflow-x: hidden;
overflow-y: auto;
}
Я просто ставлю ниже CSS, и теперь прокрутка тела скрыта всякий раз, когда открывается модальное всплывающее окно. Я использую Angular UI Bootstrap.
.modal-open {
overflow: hidden !important;
position: relative
}
Когда вы добавляете переполнение: скрыто, прокрутка фоновой страницы скрыта. Тем не менее, модальная прокрутка будет видна как прокрутка страницы, а модальная будет установлена для прокрутки.
body.modal-open {
overflow: hidden;
}
В начальной загрузочной строке 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()
Для меня страница прокручивается, когда диалог закрывается, поэтому я исправил файл ui-bootstrap-tpls.js. Фактическая проблема заключается в том, что при отключении модального метода removeModalWindow вызывается с параметрами "modalInstance" и "modalWindow.value.modalOpener".
Второй параметр используется для фокусировки на элементе, который запускает модальное окно. Просто удалите второй параметр в функции "увольнение" и "закрыть", и ваш эффект прокрутки страницы будет разрешен.
'removeModalWindow (modalInstance, modalWindow.value.modalOpener)' становится 'removeModalWindow (modalInstance)'