Как справиться с двумя перекрывающимися модулями загрузки 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">&times;</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 также с точки зрения пользователя. Иногда меньше.

Я оставляю решение относительно того, какой подход выбрать, чтобы кто-нибудь мог встретить это в пучке...