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

Question

我有两个模式，一个用于注册，一个用于登录。在每个模态中，我有一个 link 到另一个模态，如下所示：

模态寄存器

<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。您构建代码的方式，它只是意味着当您按下模态按钮时，它会关闭当前模态，当其 'close' 事件触发时，会显示另一个模态。你陷入了一个循环，这就是你现在的处境。

尝试用这个替换您的代码：

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

更新二：

考虑到滚动条，您可以更新代码以删除事件侦听器，一旦其他模式已显示。

$('#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
    });
});

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

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

Can't close modals after switching if it was already open

javascript

jquery

twitter-bootstrap-3