我有一个引导模式对话框,我想首先显示,然后当用户在页面上单击时,它就消失了。我有以下几点:
$(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>
模态最初会显示,但在模态之外单击时不会关闭。此外,内容区域没有灰色。我怎么能得到模态显示最初,然后关闭后,用户点击区域外?我怎么能得到背景是灰色的演示?
在我的例子中,我使用了一个按钮来显示模式
<button type="button" class="btn btn-success" style="color:white"
data-toggle="modal" data-target="#my-modal-to-show" >
<i class="fas fa-plus"></i> Call MODAL
</button>
因此,在我的代码中,为了关闭模态(id = 'my-modal-to-show'),我调用了这个函数(在Angular typescript中):
closeById(modalId: string) {
$(modalId).modal('toggle');
$(modalId+ ' .close').click();
}
如果我调用$(modalId).modal('hide')它不工作,我不知道为什么
PS:在我的模态中,我用.close类编写了按钮元素
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
我的回答并不像上面的许多问题那样严格地与问题相关。但这些对话帮助我弄清楚为什么我的引导模式在我点击一个非常普通的关闭按钮时没有反应,而当我按下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');
});