关闭Bootstrap模态框

Question

我有一个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>

模态框初始时已显示，但在单击模态框外部时未关闭。另外，内容区域没有变灰。我该如何使模态框初始时显示，然后在用户单击区域外部后关闭？并且如何像演示中那样将背景变灰？

- Nick B

---

你是用 $("#yourModal").modal() 还是 $('.modal').modal() 来初始化你的模态框？ - merv

https://stackoverflow.com/questions/62053501/close-jquery-modal/62053789#62053789 - KushalSeth

Answer 1

使用modal('toggle')而不是modal(toggle)

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

- Tamil Selvan C

---

包含“toggle”是多余的。只需确保模态框DIV上没有“hide”类即可。但是，确实存在拼写错误会导致问题。所以+1。 - merv

不，它没有按预期工作，它隐藏了模态元素，但背景遮罩元素仍然存在，您应该使用@Subodth的解决方案。 - Parik Tiwari

@Pierre - 考虑删除你的评论，.modal().hide() 不同于 .modal('hide')，你会让人们感到困惑。 - Michael Peterson

就像Parik所说的那样，正确的答案是使用modal('hide')。 - MidouCloud

在另一个模态窗口的情况下，这是无法工作的。谢谢。 - Kamlesh

太棒了，我卡了好几个小时了。这正是我需要的。我在关闭另一个模态对象后打开了一个新的模态对象，并在我的函数中调用了它们的切换，效果非常完美。非常感谢！ - Bilbonic

Answer 2

要关闭 Bootstrap 模态框，您可以将'hide'作为选项传递给模态框方法，如下所示。

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

请查看工作中的fiddle here Bootstrap还提供了可以挂钩modal功能的事件，例如，如果您想在模态框已从用户处完全隐藏时触发事件，则可以使用hidden.bs.modal事件。您可以在此处阅读有关模态框方法和事件的更多信息：Documentation 如果以上方法都不起作用，请为关闭按钮分配一个ID，并触发关闭按钮的单击。

- Subodh Ghulaxe

---

$('#modal').modal('toggle'); 最好隐藏模态框的阴影。 - hamzeh.hanandeh

“toggle”指的是切换，保留覆盖层不是解决方案。您应该始终使用“show”或“hide”。 - ryanpcmcquen

Answer 3

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

或者

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

应该可以使用。

但如果其他方法都不奏效，您可以直接调用模态框的关闭按钮：

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

- Robert Benyi

---

使用hide()的方式可以关闭模态框，但会保留背景的模糊效果。使用$("#modal .close").click()则可以完美地实现这一点。谢谢！ - Shilpa

这已经有明确的文件记录了，没有必要伪造点击，这显得相当不可靠。正确的答案是：$('#modal').modal('hide'); - Michael Peterson

这 -> $('#modal').modal().hide(); - TARA

我有一个模型，它不能使用 $('#modal').modal('hide') 关闭，但我可以使用 $('#modal').modal('toggle') 关闭，但是关闭后会显示垂直滚动条。所以对我来说 $('#modal').hide() 很完美，但我想知道是否会出现任何问题？而且我正在 $('#modal .close').click() 中编码，所以我不认为我可以使用它来关闭模态框。 - Ahtisham

Answer 4

这对我起作用：

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

使用此链接关闭模态框

- santhosh

Answer 5

试一试

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

- Love Kumar

---

我认为这提供了对问题的答案。 - jkdev

我同意。这个答案更准确地回答了问题。 - mikeyq6

@MarceloAgimóvel :-) - Love Kumar

Answer 6

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

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

- Yishai Landau

Answer 7

这个很不错，而且在Angular 2中也可以使用。

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

- user3869304

---

对我来说有效的是$('#modal').modal('toggle');没有任何效果。 - Todor Todorov

Answer 8

你可以查看这个参考链接，如果此链接已经被移除，请阅读以下说明:

使用单行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('toggle')

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

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

.modal('show')

手动打开一个模态框。在实际显示模态框之前（即在shown.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...
})

- Sajad Mirzaei

Answer 9

我对此事的看法是，我不想通过ID来选定Bootstrap模态框。鉴于一次应该只有一个模态框出现，因此以下操作应该足以将模态框删除，因为使用toggle可能会很危险：

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

- Andre Van Zuydam

---

意图是好的，但这种方法并不总是有效。其他页面元素，包括<body>，也添加了类，这些类也必须被还原。最好的答案是使用“hide”方法。 - JustinStolle

你可以为元素定义ID，但问题在于模糊背景保持不变。我解决了这个问题，使用了这个代码：$('.modal-backdrop').remove()。 - Sabaoon Bedar

Answer 10

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

data-dismiss="modal"

而不是

data-dissmiss="modal"

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

- zinczinc