javascript - 单击时在 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…&lt;/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

从引导文档：

手动隐藏模态。

.modal('hide')

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

因此，如果您想隐藏它，click可以将此操作绑定到click event

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

如果您想在加载文档的几秒钟后隐藏它，您可以尝试使用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使用 anid而不是 aclass

Answer 2

旧帖子，但现在可以使用 HTML 属性来完成。

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

Answer 3

我有同样的问题。如果仍然需要它，您可以尝试将“click”事件放在另一个事件“shown.bs.dropdown”中，如下所示：

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

在我的情况下，显示模式时未绑定“点击”事件。所以当我把它放在“show.bs.dropdown”事件中时，一切都如我所料。显示模态后，“单击”就绑定到模态。

Answer 4

尝试这个

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