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

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

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


当前回答

这对我很有用。我是一个新手,所以,请忽略我的使用JQuery和香草JavaScript一起。

document.addEventListener("click",function(){
        $(".modal").modal('hide');
        });

其他回答

只需在modal中添加这个

div tabindex="-1"

我的回答并不像上面的许多问题那样严格地与问题相关。但这些对话帮助我弄清楚为什么我的引导模式在我点击一个非常普通的关闭按钮时没有反应,而当我按下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');
  });

使用模态。Hide只会隐藏模态。如果你在模态下面使用覆盖,它仍然会在那里。使用点击调用实际关闭模式,并删除覆盖。

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

试试这个

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

关闭引导模式,你可以传递'hide'作为选项的模式方法,如下所示

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

请在这里看看工作小提琴

bootstrap也提供事件,你可以挂钩到模态功能,比如如果你想触发一个事件,当模态完成隐藏从用户,你可以使用hidden. b.s modal事件,你可以阅读更多关于模态方法和事件在这里的文档

如果以上方法都不起作用,给你的关闭按钮一个id,并触发点击关闭按钮。