Не могу закрыть модалы после переключения, если он уже открыт - PullRequest
Новая
       30

Не могу закрыть модалы после переключения, если он уже открыт

0 голосов
/ 04 мая 2020

У меня есть два мода, один для регистрации, один для входа. В каждом модале у меня есть ссылка на другой модал, например:

Модальный регистр 

<span id="btn-open-login"><a id="btn-open-login-link">Back to Login</a></span>

Модальный логин 

<span id="btn-open-register"><a id="btn-open-register-link">Register here!</a></span>

Чтобы закрыть и открыть модал без тела прокрутка Я использую этот мир js:

js 

$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
    $("#modalLogin").modal("hide");
    $("#modalLogin").on("hidden.bs.modal",function(){
        $("#modalRegister").modal("show");
    });
});

$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
    $("#modalRegister").modal("hide");
    $("#modalRegister").on("hidden.bs.modal",function(){
        $("#modalLogin").modal("show");
    });
});

Модальный логин открывается первым по умолчанию.

Отлично работает в первом раунде. Но когда модальное имя входа открывается во второй раз, я больше не могу закрывать модальное окно. Он просто продолжает переключаться.

Что мне не хватает?

Здесь скрипка: https://jsfiddle.net/tk1rbys0/

1 Ответ

1 голос
/ 04 мая 2020

Вы можете использовать modal('toggle') вместо "show" и "hide".

Кроме того, вам не нужно слушать hidden.bs.modal. То, как вы структурировали свой код, это просто означает, что когда вы нажимаете модальную кнопку, он закрывает текущий модальный режим, когда запускается его событие 'close', отображается другой модальный режим. Вы застряли в al oop, что является вашей текущей ситуацией.

Попробуйте заменить ваш код следующим образом: 

let modalLogin = $('#modalLogin'),
    modalRegister = $('#modalRegister');

$('#btn-open-register').on('click', '#btn-open-register-link', function () {
    modalLogin.modal('toggle');
    modalRegister.modal('toggle');
});

$('#btn-open-login').on('click', '#btn-open-login-link', function () {
    modalRegister.modal('toggle');
    modalLogin.modal('toggle');
});

Надеюсь, это поможет.

Обновление:

Переключите модалы в обратном порядке, таким образом, у вас всегда будет один видимый, который не даст полосе прокрутки отображать: 

$('#btn-open-register').on('click', '#btn-open-register-link', function () {
    modalRegister.modal('toggle');
    modalLogin.modal('toggle');
});

$('#btn-open-login').on('click', '#btn-open-login-link', function () {
    modalLogin.modal('toggle');
    modalRegister.modal('toggle');
});

Обновление 2:

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

$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
    $("#modalLogin").modal("hide");
    $("#modalLogin").on("hidden.bs.modal",function(){
        $("#modalRegister").modal("show");
        $("#modalLogin").off("hidden.bs.modal");  // allow closing
    });
});

$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
    $("#modalRegister").modal("hide");
    $("#modalRegister").on("hidden.bs.modal",function(){
        $("#modalLogin").modal("show");
        $("#modalRegister").off("hidden.bs.modal"); // allow closing
    });
});

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

...