我有一个引导模式对话框，我想首先显示，然后当用户在页面上单击时，它就消失了。我有以下几点:
$(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>
模态最初会显示，但在模态之外单击时不会关闭。此外，内容区域没有灰色。我怎么能得到模态显示最初，然后关闭后，用户点击区域外?我怎么能得到背景是灰色的演示?
我的回答并不像上面的许多问题那样严格地与问题相关。但这些对话帮助我弄清楚为什么我的引导模式在我点击一个非常普通的关闭按钮时没有反应，而当我按下ESC按钮时它仍然关闭。
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
它可能会帮助某些人。
如果你在你的代码中(在某些特殊情况下它是有意义的):
$modal.off('click')
然后它还会导致模态不会关闭，因为事件被阻塞了。
在这种情况下，你必须自己处理:
$modal
.on('click', '[data-dismiss="modal"]', function() {
$modal.modal('hide');
});
我用这个技巧以编程方式关闭了模态
在modal中添加一个带有data-dismiss="modal"的按钮，并用display: none隐藏该按钮。这是它看起来的样子
<div class="modal fade" id="addNewPaymentMethod" role="dialog">
<div class="modal-dialog">
.
.
.
<button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
</div>
</div>
现在，当你想以编程方式关闭模态时，只需在该按钮上触发一个单击事件，这对用户是不可见的
在Javascript中，你可以像这样触发点击按钮:
document.getElementById('close-modal').click();
