javascript - 如果模式已经打开，则切换后无法关闭模式

Question

我有两种模式，一种用于注册，一种用于登录。在每个模式中，我都有一个指向另一个模式的链接，如下所示:

模态寄存器

<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");
    });
});

默认情况下，模式登录首先打开。

第一轮效果很好。但是当登录模式第二次打开时，我无法再关闭该模式。它只是不断切换。

我错过了什么？

这里有一个 fiddle :https://jsfiddle.net/tk1rbys0/

Answer 1

您可以使用modal('toggle')代替“show”和“hide”。

此外，您不需要监听hidden.bs.modal。您构建代码的方式只是意味着当您按下模式按钮时，它会关闭当前模式，当其“关闭”事件触发时，会显示另一个模式。你陷入了一个循环，这就是你目前的情况。

尝试用以下代码替换您的代码:

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
    });
});

这应该允许您关闭一个打开的模式而不显示另一个模式。