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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:21:54  来源:igfitidea点击:

Hide Modal in Twitter Bootstrap when clicked

javascriptjquerycsstwitter-bootstrap

提问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">&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.

场景是这样的:我有一个重定向页面,我想显示模态。是的,当然我把它显示出来了,但我如何关闭它?我尝试了不同的点击功能方式,但没有任何反应。

回答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给他一个classid

<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' 就被绑定到模态。