單擊后如何延遲 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

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 分鍾。 您可以根據需要使用它...

Answer 4

如果上述方法中的任何一個不起作用，請嘗試使用此方法。 它會完美地工作。

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