封闭引导模态

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

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

2019-02-27 12:36:38

其他回答

另一种方法是首先删除类modal-open，这样就关闭了模态。然后您删除类modal- background，它删除了模态的灰色封面。

可以使用以下代码:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()

2017-05-30 15:26:05

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

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

2019-12-21 05:24:25

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

2021-12-17 15:55:28

此外，你可以“点击”一个“x”，关闭对话框。例如:

$ (" .ui-dialog-titlebar-close ") .click ();

2017-01-10 21:10:39