Как справиться с двумя перекрывающимися модулями загрузки Bootstrap Twitter
У меня есть стандартный Twitter Bootstrap modal на моей странице:
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Comments</h3>
</div>
<div class="modal-body">
<p>Please provide a comment:</p>
<textarea id="comment"></textarea>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save comment</a>
</div>
</div>
Теперь я сохраняю комментарий через AJAX и закрываю модальность, когда происходит успешное сохранение. Тем не менее, у меня есть глобальный обработчик ошибок AJAX, который сам открывает модальный режим, когда любые вызовы AJAX сталкиваются с ошибкой (не только для комментариев AJAX-вызова):
<div id="error-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Error</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
Модальное тело заполняется обработчиком ошибок, и по умолчанию новый модал помещается поверх существующего модального. Тем не менее, модальный фон для нового модала стоит за оригинальным модальным, который все еще позволяет взаимодействовать с ним.
Есть ли способ предоставить модальный фон ошибки для другого z-индекса? Прямо сейчас модальный фон является модальным агностиком и не имеет модального конкретного id/class.
Или есть ли какие-нибудь хорошие плагины, которые имеют дело с несколькими моделями Bootstrap Twitter?
Ответы
Ответ 1
Возможно, стоит проверить этот плагин Bootstrap Modal.
В демо здесь...
http://jschr.github.io/bootstrap-modal/
... в одном из примеров есть "Stackable" модалы, и насколько я могу судить, вы не можете взаимодействовать со старым модалом за новым модальным; т.е. вам сначала нужно щелкнуть фон нового модального, чтобы новый модал исчез и получить доступ к старому модальному. (Обратите внимание, что пример дает разные id для каждого модала.)
В стороне я рассматривал использование этого плагина в какой-то момент, но, я думаю, частично эта статья дала аргумент в пользу использования модалов для встроенного редактирования: http://www.keepitslickstupid.com/3-essential-ux-ideas/ (см. раздел 3, "Модальные диалоги - это 2002" )
Ответ 2
Вот как я справился с этим. Я показывал сообщения об ошибках из вызова AJAX, запущенного в модальном режиме в загрузочном боксе. Это вызвало беспорядок. Итак, вот что я сделал с z-индексами:
.bootbox.modal {
z-index: 1070;
}
.bootbox.modal + .modal-backdrop {
z-index: 1060;
}
Что здесь происходит, так это то, что начальный z-индекс для фона составляет 1040, а модальный - 1050. Так как bootbox добавляет модальный и задний фон в конце страницы, я дал загрузочному боксу z-индекс 1070, поэтому он остается на абсолютной вершине и использовал селектор "+" в CSS только для выбора модального фона, который появляется сразу после загрузочного бокса, и изменил его индекс z на 1060. Теперь это перекрывает предыдущий модальный, позволяя фокусу остаются на загрузочном боксе.
Если вы не используете bootbox, я думаю, вы можете назначить собственный класс второму модальному моменту и работать оттуда. Я не видел, как модальные фоны складываются, если у вас есть предопределенные модальности, но просто проверяйте элементы и выбирайте свой селектор CSS соответственно.
Приветствия
Ответ 3
Это может быть не-ответ в зависимости от вашей перспективы, но я дам ему:
Я столкнулся с той же проблемой некоторое время назад. Вместо того, чтобы открывать другой мод, я решил, что обработчик ошибок ajax просто добавит сообщение об ошибке к уже открытому модальному (если его нет, сначала открывается пустой модаль).
Это проще с точки зрения программирования (никаких других взломов или плагинов не требуется) и IMHO также с точки зрения пользователя. Иногда меньше.
Я оставляю решение относительно того, какой подход выбрать, чтобы кто-нибудь мог встретить это в пучке...
