我有一个引导模式对话框,我想首先显示,然后当用户在页面上单击时,它就消失了。我有以下几点:

$(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>

模态最初会显示,但在模态之外单击时不会关闭。此外,内容区域没有灰色。我怎么能得到模态显示最初,然后关闭后,用户点击区域外?我怎么能得到背景是灰色的演示?


当前回答

$('#modal').modal('toggle'); 

or

$('#modal').modal().hide();

应该工作。

但如果没有其他工作,你可以直接调用模式关闭按钮:

$("#modal .close").click()

其他回答

这招对我很管用:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

使用这个链接模态关闭

我用这个技巧以编程方式关闭了模态

在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();

经过一些测试,我发现对于引导模式,在执行$(.modal).modal('show')后执行$(.modal).modal('hide')之前需要等待一段时间。我发现在我的情况下,我需要在两者之间至少500毫秒的间隔。 这是我的测试用例和解决方案:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

在我的例子中,我使用了一个按钮来显示模式

<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">&times;</span>
</button>

在我的情况下,主页从引导模式被触发开始不响应后使用$("#modal").modal('toggle');方式,但开始以以下方式回应:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});