twitter-bootstrap 单击时在 Twitter Bootstrap 中隐藏模态
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17163476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide Modal in Twitter Bootstrap when clicked
提问by user2247326
Here is a sample code from twitter bootstrap but . . .
这是来自 twitter bootstrap 的示例代码,但是 . . .
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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.
场景是这样的:我有一个重定向页面,我想显示模态。是的,当然我把它显示出来了,但我如何关闭它?我尝试了不同的点击功能方式,但没有任何反应。
回答by steo
From bootstrap doc :
从引导文档:
Manually hides a modal.
手动隐藏模态。
.modal('hide')
$('.modal').modal('hide')
So if you want to hide it on clickyou can bind this action to the clickevent
所以如果你想隐藏它,click你可以将此操作绑定到clickevent
$('#yourid').on('click' , function() {
$('.modal').modal('hide')
});
if you want to hide it after some second that you loaded the document you can try with a timeout
如果您想在加载文档的几秒钟后隐藏它,您可以尝试使用 timeout
$(function(){ //document ready
..
.. //your code
..
setTimeout(function(){
$('.modal').modal('hide')
}, 2000); //2000 = 2 second
..
})
UPDATE 1
更新 1
To bind it on the close buttongive him a classor id
在结束时绑定它button给他一个class或id
<a href="#" class="btn closebtn">Close</a>
now
现在
$('.closebtn').on('click',function() {
$('.modal').modal('hide');
});
If you want to bind only on that closebuttonuse an idinstead of a class
如果你只想绑定那个closebutton使用一个id而不是一个class
回答by Kye
Old post but this can now be done using HTML attributes.
旧帖子,但现在可以使用 HTML 属性来完成。
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
回答by sangram parmar
try this
试试这个
$('.modal').modal('hide');
回答by aprok
I had the same problem. If it's still needed you can try to put your 'click' event in another event 'shown.bs.dropdown' like so:
我有同样的问题。如果仍然需要它,您可以尝试将您的 'click' 事件放在另一个事件 'shown.bs.dropdown' 中,如下所示:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#yourid').on('click' , function() {
$('#myDropdown').modal('hide');
});
});
In my case the 'click' event wasn't binded when the modal was shown. So when I put it in 'show.bs.dropdown' event, everything went as I expected. 'click' was binded to modal as soon as modal was shown.
在我的情况下,显示模态时未绑定“单击”事件。所以当我把它放在 'show.bs.dropdown' 事件中时,一切都按我的预期进行。一旦显示模态,'click' 就被绑定到模态。

