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…</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 文档:

手动隐藏模态框。

.modal('hide')

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

因此，如果您想在click 时隐藏它，您可以将此操作绑定(bind)到click 事件

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

如果您想在加载文档几秒钟后隐藏它，您可以尝试使用 timeout

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

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

..
})

更新 1

要将其绑定(bind)在关闭按钮上给他一个class或id

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

现在

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

如果您只想绑定(bind)到那个close button，请使用id 而不是class