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

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

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

我想念什么？

这里是一个小提琴：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
    });
});

这应该允许您关闭打开的模式而不显示其他模式。

如果已经打开，则无法在切换后关闭模态

1 个答案: