gpt4 book ai didi

jquery - Bootstrap Modal 自动打开 关闭

转载 作者:行者123 更新时间:2023-12-01 03:33:46 24 4
gpt4 key购买 nike

function modalFunction(hideModal, showModal) {
console.log(hideModal);
console.log(showModal);
$(hideModal).modal('hide').on('hidden.bs.modal',function () {
$(showModal).modal('show');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<body>
<button class="btn btnp-default"><a data-toggle="modal" data-target="#login">Login</a></button>
<button class="btn btnp-default"><a data-toggle="modal" data-target="#signup">Signup</a></button>

<div class="modal" id="login">
<div class="modal-content">
<p><a href="#" onclick="modalFunction('#login', '#signup')">Signup</a></p>
</div>
</div>

<div class="modal" id="signup">
<div class="modal-content">
<p><a href="#" onclick="modalFunction('#signup', '#login')">Login</a></p>
</div>
</div>
</body>

问题是我也需要隐藏最近打开的模式并显示另一个模式,但在给定的代码下面我陷入了模式连续显示和隐藏的循环中。无法阻止或关闭模态。正如您在演示中看到的那样,无法关闭模式。

这里的情况是

  • 模态登录有链接 -> 模态登录
  • 模态注册有链接 -> 模态登录

最佳答案

您可以采用不同的方式(使用自定义 HTML 属性):

$('[data-close]').click(function() {
var closeModal = $(this).attr('data-close');
var openModal = $(this).attr('data-open');
$(closeModal).modal('hide');
$(openModal).modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
<button class="btn btn-default"><a data-toggle="modal" data-target="#login">Login</a></button>
<button class="btn btn-default"><a data-toggle="modal" data-target="#signup">Signup</a></button>

<div class="modal" id="login">
<div class="modal-content">
<p><a href="#" data-close="#login" data-open="#signup">Signup</a></p>
</div>
</div>

<div class="modal" id="signup">
<div class="modal-content">
<p><a href="#" data-close="#signup" data-open="#login">Login</a></p>
</div>
</div>
</body>

关于jquery - Bootstrap Modal 自动打开 关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42233485/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com