Мне нужно, чтобы наложение показывалось над первым модалом, а не сзади.
Я попытался изменить z-index
из .modal-backdrop
, но это становится беспорядок.
В некоторых случаях у меня есть более двух модалов на одной странице.
источник
Мне нужно, чтобы наложение показывалось над первым модалом, а не сзади.
Я попытался изменить z-index
из .modal-backdrop
, но это становится беспорядок.
В некоторых случаях у меня есть более двух модалов на одной странице.
Увидев множество исправлений для этого, и ни одно из них не было именно тем, что мне было нужно, я пришел к еще более короткому решению, вдохновленному @YermoLamers & @Ketwaroo.
Фоновое исправление z-index
Это решение использует, setTimeout
потому что .modal-backdrop
не создается при запуске события show.bs.modal
.
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
.modal
созданного на странице (даже динамические модалы)Если по какой-либо причине вам не нравится жестко запрограммированный z-индекс, вы можете рассчитать самый высокий z-индекс на странице следующим образом:
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;
Исправление
полосы прокрутки Если на вашей странице есть модальное окно, которое превышает высоту браузера, вы не можете прокрутить его при закрытии второго модального окна. Чтобы исправить это, добавьте:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
Версии
Это решение протестировано с начальной загрузкой 3.1.0 - 3.3.5.
.not(this)
во вторую строку), чтобы заставить его работать с начальнойvar zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Я понимаю, что ответ принят, но я настоятельно рекомендую не взламывать загрузчик, чтобы это исправить.
Вы можете довольно легко добиться того же эффекта, подключив обработчики событий show.bs.modal и hidden.bs.modal и настроив там z-index.
Вот рабочий пример
Немного больше информации доступно здесь.
Это решение работает автоматически с произвольно глубокими стеками модов.
Исходный код скрипта:
источник
Что-то более короткая версия, основанная на предложении Ермо Ламерса, похоже, это работает хорошо. Даже с такими базовыми анимациями, как постепенное исчезновение и даже сумасшедший поворот газеты Бэтмена. http://jsfiddle.net/ketwaroo/mXy3E/
источник
modal-open
класс на элемент тела: jsfiddle.net/vkyjocynКомбинируя ответ A1rPun с предложением StriplingWarrior, я придумал следующее:
Работает даже для динамических модалов, добавленных после факта, и устраняет проблему второй полосы прокрутки. Наиболее примечательной вещью, для которой я нашел это полезным, была интеграция форм внутри модалов с проверкой обратной связи из предупреждений Bootbox, поскольку они используют динамические модалы и, таким образом, требуют привязки события к документу, а не к .modal, поскольку это только присоединяет его к существующим модальности.
Скрипка здесь
источник
Я создал плагин Bootstrap, который включает в себя множество идей, размещенных здесь.
Демонстрация по загрузке: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Это также решает проблему с последовательными модалами, заставляющими фон становиться темнее и темнее. Это гарантирует, что в любой момент времени виден только один фон:
Z-индекс видимого фона обновляется как для событий, так
show.bs.modal
и дляhidden.bs.modal
событий:источник
При решении Stacking modals прокручивает главную страницу, когда она закрыта, я обнаружил, что более новые версии Bootstrap (по крайней мере, начиная с версии 3.0.3) не требуют никакого дополнительного кода для укладки модалов.
Вы можете добавить более одной модальной линии (конечно, с другим идентификатором) на свою страницу. Единственная проблема, обнаруженная при открытии более одного модального режима, заключается в том, что закрытие удаляет
modal-open
класс для селектора тела.Вы можете использовать следующий код Javascript для повторного добавления
modal-open
:Если вам не нужен эффект фона для сложенного модала, вы можете установить
data-backdrop="false"
.Версия 3.1.1. Исправлена ошибка, из-за которой фиксировался модальный фон, перекрывающий полосу прокрутки модала , но вышеприведенное решение, похоже, также работает с более ранними версиями.
источник
Наконец-то решено. Я проверял это во многих отношениях и прекрасно работает.
Вот решение для тех, у кого есть такая же проблема: Измените функцию Modal.prototype.show (в bootstrap.js или modal.js)
ИЗ:
TO:
Это самый лучший способ, который я нашел: проверить, сколько модалей открыто, и изменить z-индекс модала и фона на более высокое значение.
источник
Если вы ищете решение Bootstrap 4, есть простое решение с использованием чистого CSS:
источник
Попробуйте добавить следующее в ваш JS при загрузке
Объяснение:
Поиграв с атрибутами (используя инструмент разработки Chrome), я понял, что любое
z-index
значение ниже1031
, отодвинет на задний план.Поэтому, используя модальные дескрипторы событий начальной загрузки, я установил
z-index
в1030
. Если#myModal2
отображается и установитеz-index
обратно,1040
если#myModal2
скрыто.демонстрация
источник
Каждый раз, когда вы запускаете sys.showModal, функция увеличивает z-index и устанавливает новый модальный режим.
источник
Решение этой проблемы для меня состояло в том, чтобы НЕ использовать класс "fade" в моих модальных div-ах.
источник
Нет сценариев решения, используя только CSS, если у вас есть два слоя модалов, установите 2-й модал на более высокий индекс z
источник
Если вы хотите, чтобы конкретный модал отображался поверх другого открытого модала, попробуйте добавить HTML самого верхнего модала после другого модального
div
.Это сработало для меня:
источник
Мое решение для bootstrap 4, работающее с неограниченной глубиной модальных и динамических модальных.
источник
Каждому модалу должен быть присвоен свой идентификатор, а каждая ссылка должна быть ориентирована на другой модальный идентификатор. Так должно быть что-то вроде этого:
источник
РЕДАКТИРОВАТЬ: Bootstrap 3.3.4 решил эту проблему (и другие модальные проблемы), так что если вы можете обновить свои загрузочные CSS и JS, это было бы лучшим решением. Если вы не можете обновить приведенное ниже решение, оно все равно будет работать и, по сути, будет работать так же, как и при начальной загрузке 3.3.4 (пересчитать и применить отступы).
Как отметил Басс Йобсен, в новых версиях Bootstrap решен z-индекс. Для меня все еще были проблемы с открытым модальным классом и правым отступом, но этот сценарий, вдохновленный решением Yermo Lamers, решает эту проблему. Просто поместите его в свой файл JS и наслаждайтесь.
источник
Проверь это! Это решение решило проблему для меня, несколько простых строк CSS:
Вот ссылка на то, где я ее нашел: Bootply Просто убедитесь, что .modual, который должен отображаться сверху, является вторым в HTML-коде, поэтому CSS может найти его как «четный».
источник
работа для открытия / закрытия мультимодальных
демонстрация
https://www.bootply.com/cObcYInvpq#
источник
Для меня эти простые правила scss работали отлично:
Если эти правила приводят к тому, что в вашем случае неправильная модальность будет выше, либо измените порядок ваших модальных дивов, либо измените (нечетное) на (четное) в приведенном выше scss.
источник
Вот некоторые CSS с использованием
nth-of-type
селекторов, которые, кажется, работают:Bootply: http://bootply.com/86973
источник
У меня был похожий сценарий, и после небольшого исследования я нашел решение. Хотя я не очень хорош в JS, мне все же удалось записать небольшой запрос.
http://jsfiddle.net/Sherbrow/ThLYb/
источник
Добавить глобальную переменную в modal.js
// показать функцию внутри переменной add - Modal.prototype.backdrop
источник
Другие решения не работали для меня из коробки. Я думаю, возможно, потому что я использую более свежую версию Bootstrap (3.3.2) .... наложение появлялось поверх модального диалога.
Я немного переработал код и прокомментировал часть, которая корректировала модальный фон. Это решило проблему.
В качестве примечания: если вы хотите использовать это в AngularJs, просто поместите код внутри метода вашего модуля .run ().
источник
К сожалению, у меня нет репутации комментировать, но следует отметить, что принятое решение с жестко закодированной базовой линией z-индекса 1040, похоже, превосходит вычисление zIndex, которое пытается найти максимальное значение zIndex, отображаемое на странице.
Похоже, что некоторые расширения / плагины полагаются на содержимое DOM верхнего уровня, что делает расчет .Max настолько неприлично большим числом, что он не может увеличивать zIndex дальше. Это приводит к модальному режиму, в котором наложение отображается поверх модального некорректно (если вы используете инструменты Firebug / Google Inspector, вы увидите zIndex порядка 2 ^ n - 1)
Мне не удалось выделить причину, по которой различные формы Math.Max для z-Index приводят к этому сценарию, но это может произойти, и оно будет уникальным для нескольких пользователей. (В моих общих тестах на browsertack этот код работал отлично).
Надеюсь, это кому-нибудь поможет.
источник
В моем случае проблема была вызвана расширением браузера, которое включает в себя файлы bootstrap.js, в которых событие show обрабатывается дважды и
modal-backdrop
добавляются два div, но при закрытии модального режима удаляется только один из них.Обнаружил, что добавив точку останова модификации поддерева к элементу body в chrome, и отследил добавление
modal-backdrop
div.источник
источник
Обновление: 22.01.2019, 13.41 Я оптимизировал решение с помощью jhay, который также поддерживает закрытие и открытие одинаковых или разных диалоговых окон, например, при переходе от одной детализации данных к другой вперед или назад.
источник
Проверьте количество модалов и добавьте значение к фону как z-index
источник