Проблемы с событием hidden.bs.modal Bootstrap

294

30 ноября 2017, 01:13

В модальном окне "Вход" (Bootstrap) имеются две ссылки "Войти" и "Регистрация". При клике на которых появляется соответствующее модальное окно.

При появлении второго модального окна, первый должен закрыться.

У Bootstrap для этого используется следующее:

hidden.bs.modal - срабатывает когда модальное окно закрылось.
$('elem').modal('hide') - закрыть окно.

Код следующий:

    function toggleModal(elem, modalEl) {
        var idModal;
        idModal = $(elem).attr('data-target');
        $(modalEl).modal('hide');
        $(modalEl).on('hidden.bs.modal', function (e) {
            idModal = $(elem).attr('data-target');
            $(idModal).modal('show');
        });
    }
    var userAuthModal = $('#order-pa__log');
    var userIdentif = userAuthModal.find('.order-pa__reglinks');
    userIdentif.on( 'click', { userAuthModal : userAuthModal }, userAuth );
    function userAuth (event) {
        var target,
            userAuthModal,
            forgotEl,
            regEl;
        target = event.target;
        userAuthModal = event.data.userAuthModal;
        forgotEl = target.closest('.modal-forgot');
        regEl = target.closest('.modal-reg');
        if (forgotEl) {
            toggleModal(forgotEl, userAuthModal);
        } else if (regEl) {
            toggleModal(regEl, userAuthModal);
        }
    }

Проблема заключается в том что при каждом открытии нового окна hidden.bs.modal срабатывает столько сколько было открыто модальных окон. Не понимаю почему так происходит и как от этого избавится.

Answer 1

Добавьте ссылке data-dismiss="modal". Вот, что называется минимальный воспроизводимый пример:

function toggleModal(elem, modalEl) { 
  var idModal; 
 
  idModal = $(elem).attr('data-target'); 
  $(modalEl).modal('hide'); 
  $(modalEl).on('hidden.bs.modal', function(e) { 
    idModal = $(elem).attr('data-target'); 
    $(idModal).modal('show'); 
  }); 
} 
 
var userAuthModal = $('#order-pa__log'); 
var userIdentif = userAuthModal.find('.order-pa__reglinks'); 
 
userIdentif.on('click', { 
  userAuthModal: userAuthModal 
}, userAuth); 
 
function userAuth(event) { 
  var target, 
    userAuthModal, 
    forgotEl, 
    regEl; 
 
  target = event.target; 
  userAuthModal = event.data.userAuthModal; 
 
  forgotEl = target.closest('.modal-forgot'); 
  regEl = target.closest('.modal-reg'); 
 
  if (forgotEl) { 
    toggleModal(forgotEl, userAuthModal); 
  } else if (regEl) { 
    toggleModal(regEl, userAuthModal); 
  } 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
  Launch demo modal 
</button> 
 
<!-- Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLabel">Modal 1</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
      </div> 
      <div class="modal-body"> 
        <!-- Button trigger modal --> 
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2" data-dismiss="modal"> 
  Launch demo modal 
</button> 
 
 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
    </div> 
  </div> 
</div> 
<!-- Modal --> 
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLabel">Modal 2</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
      </div> 
      <div class="modal-body"> 
        ... 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
    </div> 
  </div> 
</div>