单击时在Twitter Bootstrap中隐藏模式 [英] Hide Modal in Twitter Bootstrap when clicked

问题描述

这是来自Twitter引导程序的示例代码，但. .

Here is a sample code from twitter bootstrap but . . .

<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>

情况是这样的:我有一个重定向页面，我想显示模式.是的，我当然使它显示了，但是如何关闭它呢?我尝试了不同的点击功能，但没有任何反应.

The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.

推荐答案

来自引导文档:

手动隐藏模式.

.modal('hide')

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

因此，如果要将其隐藏在click上，可以将此操作绑定到click event

So if you want to hide it on click you can bind this action to the click event

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

如果要在加载文档后将其隐藏一秒钟，可以尝试使用timeout

if you want to hide it after some second that you loaded the document you can try with a timeout

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

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

..
})

更新1

要将其绑定在button上，请给他class或id

To bind it on the close button give him a class or id

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

现在

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

如果只想绑定close button，请使用id而不是class

If you want to bind only on that close button use an id instead of a class

这篇关于单击时在Twitter Bootstrap中隐藏模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！