twitter-bootstrap 单击后如何延迟 Bootstrap 3 模式的显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23696456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to delay display of Bootstrap 3 modal after click
提问by henrywright
I'm trying to delay the display of a Bootstrap modal after the user has clicked on a trigger button:
我试图在用户单击触发按钮后延迟 Bootstrap 模式的显示：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Looking at the Bootstrap 3 documentation I can see there is a showevent that can be hooked to but am not sure how to introduce a 3 second delay before the modal appears on screen. Hoping someone can help?
查看 Bootstrap 3 文档，我可以看到有一个show事件可以被挂钩，但我不确定如何在模态出现在屏幕上之前引入 3 秒延迟。希望有人能帮忙？
回答by Blazemonger
You can delay the click of the trigger button, then activate the modal directly:
可以延迟点击触发按钮，然后直接激活模态：
$('[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;
});
回答by Reece
Use .on()to hook into the event:
使用.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)
}
});
回答by Vinoth Narayan
window.setTimeout(function() {
$('#myModal').modal('show');
}, 5000)
For demo I used 5000 mini seconds. You can used it as per your need...
对于演示，我使用了 5000 分钟。您可以根据需要使用它...
回答by Joseph Miller
If any of those above method does't work, give this method a try. It will work perfectly.
如果上述方法中的任何一个不起作用，请尝试使用此方法。它会完美地工作。
$(window).ready(function() {
setTimeout(function(){
$('#myModal').modal('show');
}, 2000);
});
