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

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

 Launch demo modal  

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

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

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/

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/

Answer 3

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

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