我有两种模式,一种用于注册,一种用于登录。在每个模式中,我都有一个与其他模式的链接,如下所示:
模式注册
<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/
答案 0 :(得分: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
});
});
这应该允许您关闭打开的模式而不显示其他模式。