如何在時間段後自動關閉Bootstrap 3模態

我很努力在設定的時間段後自動關閉Bootstrap模態。如何在時間段後自動關閉Bootstrap 3模態

下面是我使用關閉模式在4秒的JS代碼：

setTimeout(function() { $('#myModal').modal('hide'); }, 4000);

兩個基本問題：

（A）當HTML頁面（包含情態動詞）載荷，模態超時似乎在模態被顯示之前運行。模式設置爲在點擊頁面中的鏈接後顯示。如果沒有點擊鏈接立即當頁面加載時，模式將只會短暫出現，然後立即關閉，因爲實質上超時時段是在加載html頁面時開始的，而不是在顯示模式時。（B）如果用戶第二次（或第三次，第四次等）點擊鏈接啓動模式，模式將正常顯示，但在該時間段後不會關閉。它只是保持打開狀態，直到用戶手動關閉它。

所以......這兩個問題是：

（1）如何獲得模態超時時間要等到模式運行時鐘之前顯示。（2）如何讓適當的Timeout函數仍然有效的第二次和第三次顯示模式？

（在這個環節中提出的答案（S）低於看起來前途無量，但不是爲我工作。也許他們不引導3？How to automatically close the bootstrap modal dialog after a minute工作）

下面這段代碼看起來非常有前途的，但即使在將「顯示」更改爲「shown.bs.modal」後也不起作用。或者，也許我把這個代碼放在錯誤的地方？

var myModal = $('#myModal').on('shown', function() { 
    clearTimeout(myModal.data('hideInteval')) 
    var id = setTimeout(function(){ 
     myModal.modal('hide'); 
    }); 
    myModal.data('hideInteval', id); 
})

非常感謝您的任何建議！

來源

2014-08-29 b-kat

在引導3模態事件後綴，所以你應該使用'shown.bs.modal'，而不是'show'，也就是對一個評論您鏈接的答案 – 2014-08-29 23:55:43

我想這取決於你如何顯示你的模態。但是你可以在事件監聽器中設置超時時間？

這裏是一個JSFiddle來演示如何實現它。基本上你會在事件發生時執行的函數中添加超時。

// Select the element you want to click and add a click event 
$("#your-link").click(function(){ 
    // This function will be executed when you click the element 
    // show the element you want to show 
    $("#the-modal").show(); 

    // Set a timeout to hide the element again 
    setTimeout(function(){ 
     $("#the-modal").hide(); 
    }, 3000); 
});

如果監聽的事件是你可以有使用event.preventDefault()防止默認動作過於鏈接的點擊。你可以找到更多的信息here

我希望這會有所幫助。

來源

2014-08-29 23:50:43

您可以將其用作： setTimeout（function（）{$（'＃myModal'）。modal（'hide'）}，3000）; – 2016-04-18 10:16:41

我不是很肯定你的HTML，所以我做了一個完整的例子：

HTML：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Open Modal</a> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
       <h4>Header</h4> 
      </div> 
      <div class="modal-body"> 
       Modal Content 
      </div> 
     </div> 
    </div> 
</div>

JS：

$(function(){ 
    $('#myModal').on('show.bs.modal', function(){ 
     var myModal = $(this); 
     clearTimeout(myModal.data('hideInterval')); 
     myModal.data('hideInterval', setTimeout(function(){ 
      myModal.modal('hide'); 
     }, 3000)); 
    }); 
});

與您的代碼的主要區別：

我設置了超時時間（300 0）
我設置myModal變量中回調現在

來源

2014-08-30 00:08:47 Aguardientico

爲我工作感謝！ – denis 2017-11-21 13:21:59

如何在時間段後自動關閉Bootstrap 3模態

回答

相關問題