closuresBootstrap模式
我有一个引导模式对话框，我想最初显示，然后当用户点击页面，它消失。 我有以下几点：
$(function () { $('#modal').modal(toggle) }); <div class="modal" id='modal'> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Error:</h3> </div> <div class="modal-body"> <p>Please correct the following errors:</p> </div> </div> </div> 模态最初显示，但在模态外单击时不会closures。 此外，内容区域不灰色..我怎样才能让模式显示在最初，然后closures后，用户点击区域外？ 我怎样才能让背景变成灰色？
把modal('toggle')而不是modal(toggle)
$(function () { $('#modal').modal('toggle'); });
要closures自举模态，你可以将'隐藏'作为选项传给模态方法
$('#modal').modal('hide');
请看这里的工作小提琴
引导程序还提供了可以挂钩到模态function的事件，例如，如果要在模块完成对用户隐藏时触发事件，则可以使用hidden.bs.modal事件，您可以在这里阅读有关模态方法和事件的更多信息文档
如果上述方法都不起作用，给你的closuresbutton一个id，并点击closuresbutton。
$('#modal').modal('toggle');
要么
$('#modal').modal().hide();
应该pipe用。
但是，如果没有其他的工作，你可以直接调用模式closuresbutton：
$("#modal .close").click()
这对我工作：
<span class="button" , data-dismiss="modal" aria-label="Close">cancel</span>
使用此链接模式closures
$("#your-modal-id").modal('hide');
通过类($(".my-modal"))运行这个调用将不起作用。
我在这一个五美分是，我不想有一个id目标的引导模式，并认为应该只有一个模式在一个时间下面应该是足够的去除模式作为切换可能是危险的：
$('.modal').removeClass('show');
这一个是相当不错的，它也适用于angular2
$("#modal .close").click()
在某些情况下，打字错误可能是罪魁祸首。 例如，确保你有：
data-dismiss="modal"
并不是
data-dissmiss="modal"
注意第二个例子中的双“ss”会导致closuresbutton失败。
我们可以通过以下方式closures模式popup窗口：
// We use data-dismiss property of modal-up in html to close the modal-up,such as <div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div> // We can close the modal pop-up through java script, such as <div class='modal fade pageModal' id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'> $('#openModal').modal('hide'); //Using modal pop-up Id. $('.pageModal').modal('hide'); //Using class that is defined in modal html.
$(window).load(function(){ $('#myModal').modal('show'); }); $(function () { $('#modal').modal('toggle'); });
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
使用modal.hide只会隐藏模态。 如果您在模式下使用叠加，它仍然会在那里。 使用点击呼叫来实际closures模式并删除覆盖。
$("#modalID .close").click()
$('.modal.in').modal('hide');
如果您在一个页面中使用多个模式popup窗口，请使用上面的代码来隐藏模式的背景。
此外，您可以在“x”上单击“closures”对话框。 例如：
$(".ui-dialog-titlebar-close").click();
这样做的另一种方法是，首先你删除模式打开，closures模式。 然后，您删除类模式背景，删除模式的灰色封面。
以下代码可以使用：
$('body').removeClass('modal-open') $('.modal-backdrop').remove()
