Как закрыть соответствующий модальный диалог при переключении на другой модальный диалог без перекрытия - с помощью Bootsrap 3

#javascript #jquery #twitter-bootstrap

Вопрос:

Страница Register-modal1, login-modal2 и forgot-modal3 отображается во всплывающем окне model-dialog с использованием bootstrap 3. Работает нормально, но при переключении на другое всплывающее окно model2 через привязочный тег с во всплывающем окне model 1, которое перекрывает model1 (model2 накладывается на model1). Вместо перекрытия мне просто нужно закрыть его model1 при переключении на model2.

Пожалуйста, помогите мне, как достичь этого с помощью bootstrap 3

1. Просто программно нажмите на кнопку закрытия.

2. То есть функциональность внутри модального 1 переключается через привязочный тег на modal2, когда это делается, как избежать перекрытия и как сделать возможность закрытия в этой функциональности

Ответ №1:

добавьте класс ко всем трем вашим модальным и запустите это :

   $('.myModal').modal('hide');
  $('.myModall').on('hidden', function () {
   $('#myModalNew').modal('show')
  })

или лучше сделайте это функцией, чтобы вы могли передать ей новое модальное имя!

 function openNewModal(elClass,elID){
  $('.' elClass).modal('hide');
  $('.' elClass).on('hidden', function () {
  // Load up a new modal...
  $('#' elID).modal('show')
 })
}

вы можете запустить его с помощью функции on click или jQuery Click.

1. Спасибо, Бардия, я исправил свою проблему с вашим предложением кода без включения (скрытая функция). У меня есть одно сомнение в этом, почему это функция on (‘hidden’). не могли бы вы, пожалуйста, прояснить меня.

2. Вы можете либо включить его (‘скрыть’), что означает, что при выключении другого модального режима открывается другой (‘скрытый’), чтобы убедиться, что другой модальный режим полностью закрыт, прежде чем открывать новый модальный. это просто способ убедиться, что все другие модалы с тем же классом закрыты перед открытием нового, вам это не обязательно нужно, это просто для моего OCD с вещами: D

3. вы можете проверить документацию bootstrap по другим событиям getbootstrap.com/javascript/#modals-events

4. Спасибо за ваше объяснение и ссылку на документацию bootstrap