單擊時在Twitter Bootstrap中隱藏模態

Question

這是來自twitter bootstrap的示例代碼但是。 。 。

<div class="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

場景是這樣的：我有一個重定向頁面，我想顯示模態。 是的，當然我已經顯示但是如何關閉它？ 我嘗試了點擊功能的不同方式但沒有任何反應。

Answer 1

來自bootstrap doc：

手動隱藏模態。

.modal('hide')

$('.modal').modal('hide')

因此，如果要在click隱藏它，可以將此操作綁定到click event

$('#yourid').on('click' , function() { 
  $('.modal').modal('hide')
});

如果你想在加載文件一段timeout后隱藏它，你可以嘗試timeout

$(function(){  //document ready
..
.. //your code
..

 setTimeout(function(){
       $('.modal').modal('hide')
 }, 2000);  //2000 = 2 second

..
})

更新1

要在關閉button上綁定它，給他一個class或id

<a href="#" class="btn closebtn">Close</a>

現在

$('.closebtn').on('click',function() {
   $('.modal').modal('hide');
});

如果只想在該close button上綁定，請使用id而不是class

Answer 2

舊帖子，但現在可以使用HTML屬性完成。

 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Answer 3

試試這個

$('.modal').modal('hide');

Answer 4

我有同樣的問題。 如果它仍然需要你可以嘗試將你的'click'事件放在另一個事件'shown.bs.dropdown'中，如下所示：

$('#myDropdown').on('show.bs.dropdown', function () {
  $('#yourid').on('click' , function() { 
    $('#myDropdown').modal('hide');
  });
});

在我的情況下，當顯示模態時，'click'事件沒有綁定。 所以，當我把它放在'show.bs.dropdown'事件中時，一切都按照我的預期進行。 一旦模態顯示，'click'就被綁定到模態。