关闭Bootstrap模式

我有一个最初要显示的引导模式对话框，然后当用户单击页面时，该对话框消失。我有以下几点：

$(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('toggle')而不是modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});

要关闭引导程序模态，可以将“ hide”作为选项传递给模态方法，如下所示

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

请在这里看看工作小提琴

引导程序还提供了可以挂接到模态功能的事件，例如，如果您希望在向用户隐藏模态完成后触发事件，则可以使用hidden.bs.modal事件，您可以在此处阅读有关模态方法和事件的更多信息。文献资料

如果以上方法均无效，请为您的关闭按钮提供一个ID，然后触发点击关闭按钮。

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

要么

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

应该管用。

但是，如果没有其他效果，则可以直接调用模式关闭按钮：

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

这为我工作：

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

使用此链接的模式关闭

$("#your-modal-id").modal('hide');

通过类运行此调用($(".my-modal"))无效。

尝试这个

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

这是一个很好的，它也可以在角度2

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

我为此花的五分钱是，我不想以id为目标引导程序模态，并且一次只能看到一个模态，因此以下内容足以删除模态，因为切换可能很危险：

$('.modal').removeClass('show');

在某些情况下，键入错误可能是罪魁祸首。例如，确保您具有：

data-dismiss="modal"

并不是

data-dissmiss="modal"

请注意第二个示例中的双“ ss”，这将导致“关闭”按钮失败。

我们可以通过以下方式关闭模式弹出窗口：

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

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

如果在一页中使用多个模式弹出，请使用上面的代码隐藏模式的背景。

   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);
               }
           }
       });
   };

您可以使用;

$('#' + $('.modal.show').attr('id')).modal('hide');

使用modal.hide只会隐藏模式。如果在模态下方使用叠加层，则该叠加层仍将存在。使用click call实际关闭模态并删除叠加层。

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

这样做的另一种方法是，首先删除类modal-open，它关闭模式。然后，您将删除模态背景类，该类将删除模态的灰色封面。

可以使用以下代码：

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

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

使用来添加模态按钮，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>

现在，当您想以模式方式关闭模式时，只需在该按钮上触发一个click事件，该事件对于用户是不可见的

在Javascript中，您可以触发该按钮的点击，如下所示：

document.getElementById('close-modal').click();

这段代码非常适合我关闭模式（我正在使用bootstrap 3.3）

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

在我的情况下，触发引导方式的主页开始使用$("#modal").modal('toggle');方式后没有响应，但是开始响应的方式如下：

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

这很好

$(function () {
   $('#modal').modal('toggle');
});

但是，当您将多个模式叠加在一起时，它是无效的，因此，这是可行的

data-dismiss="modal"

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

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

您可以看到此参考，但如果此链接已删除，请阅读以下说明：

用一行JavaScript调用id为myModal的模式：

$('#myModal').modal(options)

选件

可以通过数据属性或JavaScript传递选项。对于数据属性，将选项名称附加到data-，如data-backdrop =“”所示。

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

方法

异步方法和转换

所有API方法都是异步的，并开始过渡。一旦转换开始但转换结束之前，它们将返回给呼叫者。此外，在过渡组件上的方法调用将被忽略。

有关更多信息，请参见我们的JavaScript文档。

.modal（选项）

将您的内容激活为模式。接受一个可选的options对象。

$('#myModal').modal({
   keyboard: false
})

.modal（'toggle'）

手动切换模态。在模态实际显示或隐藏之前（即在show.bs.modal或hidden.bs.modal事件发生之前）返回到调用者。

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

.modal（'show'）

手动打开模式。在实际显示模式之前（即在show.bs.modal事件发生之前）返回到调用者。

$('#myModal').modal('show')

.modal（'hide'）

手动隐藏模式。在模式被实际隐藏之前（即在hidden.bs.modal事件发生之前）返回到调用者。

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

.modal（'handleUpdate'）

如果模态的高度在打开时发生变化，则手动重新调整模态的位置（即，如果出现滚动条）。

$('#myModal').modal('handleUpdate')

.modal（'dispose'）

销毁元素的模态。

大事记

Bootstrap的模态类公开了一些事件，可以挂接到模态功能上。所有模态事件均以模态本身（即**）触发。类型说明

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

此外，您可以“单击”“ x”，从而关闭对话框。例如：

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

就我而言，我使用按钮来显示模式

<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打字稿中）：

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>

有时解决方案无法正常工作，因此您必须正确删除in类并手动添加css display：none。

$("#modal").removeClass("in");
$("#modal").css("display","none");