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

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

这段代码完美地为我关闭一个模态(我使用bootstrap 3.3)

$('#myModal').removeClass('in')

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

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

   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

这招对我很管用:

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

使用这个链接模态关闭

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