509

我有一个我想最初显示的引导模式对话框，然后当用户点击页面时，它就会消失。我有以下内容：

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

模态框最初显示，但在模态框外单击时不会关闭。此外，内容区域没有变灰。我怎样才能让模式最初显示，然后在用户点击区域外后关闭？我怎样才能让背景像演示中那样变灰？

4

28 回答 28

811

把modal('toggle')代替modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
于 2013-05-11T03:19:28.183 回答
475

要关闭引导模式，您可以将“隐藏”作为选项传递给模式方法，如下所示

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

请在此处查看工作小提琴

bootstrap 还提供了可以挂钩到模态功能的事件，例如，如果您想在模态完成对用户隐藏时触发事件，您可以使用hidden.bs.modal事件，您可以在此处阅读有关模态方法和事件的更多信息文档

如果上述方法都不起作用，请为您的关闭按钮提供一个 ID 并触发单击关闭按钮。

于 2013-11-25T11:16:43.157 回答
105 
$('#modal').modal('toggle');

或者

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

应该管用。

但如果没有其他工作，您可以直接调用模态关闭按钮：

$("#modal .close").click()
于 2016-06-09T12:04:50.313 回答
44

这对我有用：

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

使用此链接模式关闭

于 2015-12-12T12:15:11.530 回答
29

尝试这个

$('#modal_id').modal('hide');
于 2019-07-16T05:47:34.530 回答
21 
$("#your-modal-id").modal('hide');

通过类运行此调用($(".my-modal"))将不起作用。

于 2016-12-05T10:22:26.310 回答
12

这个非常好，它也适用于 angular 2

$("#modal .close").click()
于 2017-03-01T05:58:56.023 回答
9

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

使用单行 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（选项）

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

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

.modal('切换')

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

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

.modal('显示')

手动打开一个模态。在模态实际显示之前（即在 shown.bs.modal 事件发生之前）返回给调用者。

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

.modal('隐藏')

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

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

.modal('handleUpdate')

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

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

.modal('处置')

销毁元素的模态。

活动

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...
})
于 2020-03-29T11:17:29.337 回答
8

我在这个上的五分钱是我不想用一个 id 来定位引导模式，并且看到一次应该只有一个模式，以下应该足以移除模式，因为切换可能是危险的：

$('.modal').removeClass('show');
于 2015-08-11T09:26:36.573 回答
7

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

data-dismiss="modal"

并不是

data-dissmiss="modal"

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

于 2016-08-13T09:48:00.953 回答
6

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

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

于 2017-05-16T16:41:18.163 回答
6

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

// 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.
于 2017-06-05T08:19:04.917 回答
6 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

于 2016-07-20T09:54:24.860 回答
5 
   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);
               }
           }
       });
   };
于 2018-07-09T11:10:56.260 回答
5

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

在模态中添加一个按钮，用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();
于 2018-08-30T12:19:55.310 回答
5

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

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);
于 2019-12-21T05:24:25.467 回答
4

您可以使用;

$('#' + $('.modal.show').attr('id')).modal('hide');
于 2018-04-05T12:53:04.950 回答
3

这对我有用。我是新手，所以请忽略我对 JQuery 和 Vanilla JavaScript 的使用。

document.addEventListener("click",function(){
        $(".modal").modal('hide');
        });
于 2021-09-20T06:31:49.487 回答
3

就我而言，我使用了一个按钮来显示模态

<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>
于 2019-02-27T12:36:38.567 回答
3

使用 modal.hide 只会隐藏模式。如果您在模态下方使用叠加层，它仍然会存在。使用点击调用实际关闭模式并删除覆盖。

$("#modalID .close").click()
于 2017-02-22T22:39:43.473 回答
3

另一种方法是首先删除类modal-open，它会关闭模态。然后你移除移除模态的灰色覆盖的类modal-backdrop。

可以使用以下代码：

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
于 2017-05-30T15:26:05.570 回答
2

这很好用

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

但是，当您有多个模态堆叠在一起时，它是无效的，所以相反，这是可行的

data-dismiss="modal"
于 2018-11-19T13:11:29.213 回答
2

就我而言，触发引导模式的主页在使用$("#modal").modal('toggle');方式后开始没有响应，但开始以以下方式响应：

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
于 2018-03-29T10:16:06.793 回答
2

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

$('#myModal').removeClass('in')
于 2018-03-13T17:31:54.223 回答
2

只需在模态中添加它

div tabindex="-1"
于 2020-07-07T11:39:34.100 回答
1

有时解决方案不起作用，因此您必须正确删除 in 类并手动添加 css display:none 。

$("#modal").removeClass("in");
$("#modal").css("display","none");
于 2019-04-11T16:22:04.297 回答
1

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

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

于 2017-01-10T21:10:39.200 回答
0

我的回答与上述许多其他问题并不严格相关。但是这些对话帮助我弄清楚为什么当我点击一个非常通用的关闭按钮时我的引导模式没有反应，而当我按下 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-17T15:55:28.207 回答