[英]How to delay display of Bootstrap 3 modal after click
我试图在用户单击触发按钮后延迟 Bootstrap 模式的显示:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
查看 Bootstrap 3 文档,我可以看到有一个show
事件可以连接,但不确定如何在模态出现在屏幕上之前引入 3 秒延迟。 希望有人能帮忙?
可以延迟点击触发按钮,然后直接激活模态:
$('[data-toggle=modal]').on('click', function (e) {
var $target = $($(this).data('target'));
$target.data('triggered',true);
setTimeout(function() {
if ($target.data('triggered')) {
$target.modal('show')
.data('triggered',false); // prevents multiple clicks from reopening
};
}, 3000); // milliseconds
return false;
});
使用.on()
挂钩事件:
var isFirstShowCall = false;
$('#myModal').on('show.bs.modal', function (e) {
isFirstShowCall = !isFirstShowCall; // Prevents an endless recursive call
if(isFirstShowCall) {
e.preventDefault(); // Prevent immediate opening
window.setTimeout(function(){
$('#myModal').modal('show');
}, 3000)
}
});
window.setTimeout(function() {
$('#myModal').modal('show');
}, 5000)
对于演示,我使用了 5000 分钟。 您可以根据需要使用它...
如果上述方法中的任何一个不起作用,请尝试使用此方法。 它会完美地工作。
$(window).ready(function() {
setTimeout(function(){
$('#myModal').modal('show');
}, 2000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.