单击后如何延迟显示 Bootstrap 3 模态答案

【问题标题】：How to delay display of Bootstrap 3 modal after click单击后如何延迟显示 Bootstrap 3 模态
【发布时间】：2014-05-16 13:33:27
【问题描述】：

我正在尝试在用户单击触发按钮后延迟 Bootstrap 模式的显示：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

查看 Bootstrap 3 文档，我可以看到有一个 show 事件可以挂钩，但不确定如何在模式出现在屏幕上之前引入 3 秒延迟。希望有人能帮忙？

参考： http://getbootstrap.com/javascript/#modals

【问题讨论】：

出于好奇，你到底为什么要这么做？
我有简单的解决方案 > stackoverflow.com/questions/27394729/…

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以延迟触发按钮的点击，然后直接激活模态：

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

http://jsfiddle.net/mblase75/H6UM4/

【讨论】：

感谢您，我刚刚尝试了 jsfiddle。模态不显示。在 3 秒延迟后，我似乎只是得到了一个灰色覆盖
也许延迟应该放在点击（触发）事件而不是show.bs.modal事件上？
啊，是的，刚刚得到您的编辑。看到你已经开始了。我试试新代码
唯一的问题：如果在模态显示之前单击它两次，然后立即关闭模态，第二次单击再次打开模态。不知道最好的解决方法是什么。
解决了！正在更新答案。

【解决方案2】：

使用.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)
    }
});

http://jsfiddle.net/G9XeA/

【讨论】：

更新了我的答案，虽然使用点击事件更优雅
感谢 ReeceJHayward - 这是值得被接受的答案，但我只能接受 1，所以我会 +1 这个解决方案。
我喜欢它如何在初始点击时以一种方式切换布尔标志，并在 .modal('show') 调用时再次返回。但是，这意味着如果用户快速连续单击按钮两次，则模式会在第二次单击后立即显示。
如果这是在我的应用程序中，我可能会称其为“功能”（编辑：再想一想，处理多次点击时会出错）
在我的情况下，双击无关紧要，因为触发按钮位于下拉列表中。第一次点击时，下拉菜单在用户有机会再次点击之前关闭。

【解决方案3】：

window.setTimeout(function() {
   $('#myModal').modal('show');
}, 5000)

对于演示，我使用了 5000 微秒。您可以根据需要使用它...

【讨论】：

【解决方案4】：

如果上述任何一种方法都不起作用，请尝试此方法。它会完美运行。

$(window).ready(function() {
   setTimeout(function(){
       $('#myModal').modal('show');
   }, 2000);
});

【讨论】：