如何在点击后延迟显示 Bootstrap 3 模态框

Question

我正在尝试在用户单击触发按钮后延迟显示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

- henrywright

---

出于好奇，你到底为什么想要这样做？ - Blazemonger

我有一个简单的解决方案 > https://dev59.com/Tl4c5IYBdhLWcg3w6N07 - Shurvir Mori

Answer 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/

- Blazemonger

---

谢谢，我刚刚尝试了jsfiddle。模态框没有显示出来。似乎在3秒延迟后只有一个灰色的覆盖层。 - henrywright

也许应该在点击（触发）事件上设置延迟，而不是在 show.bs.modal 事件上？ - henrywright

啊，好的，刚刚看到你的编辑。看起来你已经在处理了。我会试一下新代码。 - henrywright

唯一的问题是：如果在模态框显示之前您连续点击两次，然后立即关闭模态框，则第二次点击会再次打开模态框。不确定解决这个问题的最佳方法是什么。 - Blazemonger

解决了！正在更新答案。 - Blazemonger

我认为我有一个简单的解决方案。 - Shurvir Mori

Answer 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/

- Reece

---

更新了我的答案，虽然使用点击事件更加优雅。 - Reece

感谢ReeceJHayward - 这个回答值得被接受，但是我只能接受一个答案，所以我会+1这个解决方案。 - henrywright

我喜欢这种方法在初始点击时打开布尔标志，然后在.modal('show')调用时再次关闭。但是这意味着如果用户快速连续两次点击按钮，则模态框会立即显示出来。 - Blazemonger

如果这是在我的应用程序中，我可能会称之为“功能”（编辑：仔细想想，它在处理多次点击时相当有缺陷）。 - Reece

在我的情况下，双击并不重要，因为触发按钮在下拉菜单中。在第一次单击时，下拉菜单会在用户再次单击之前关闭。 - henrywright

Answer 3

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

为了演示，我使用了5000毫秒。您可以根据需要使用它...

- Vinoth Narayan

Answer 4

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

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

- Joseph Miller