我有一个bootstrap模态对话框,我想最初显示,然后当用户点击页面时,它就消失了。我有以下内容。
$(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>
模态最初是显示的,但在模态之外点击时,它并没有关闭。另外,内容区没有变灰。我怎样才能让模态最初显示,然后在用户点击该区域外时关闭?我怎样才能让背景像演示中那样变灰呢?
为了关闭bootstrapmodal,你可以将'hide'作为选项传递给modal方法,如下所示
$('#modal').modal('hide');
请看一下工作中的[fiddle here][2]。
bootstrap还提供了一些事件,你可以把它们挂到modal的功能中,比如你想在modal从用户那里隐藏完毕时触发一个事件,你可以使用hidden.bs.modal事件,你可以在文档中阅读更多关于modal方法和事件的内容。
如果以上方法都不奏效,给你的关闭按钮一个id,并在关闭按钮上触发点击。