Bootstrap Modal 不会在 X 或关闭按钮上关闭，但会在 ESC 或单击覆盖层上关闭

Question

嗯，标题说明了一切。我有一个默认的（从 Bootstrap 文档复制的）模式，它使用

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

打开，但在任何情况下，模式都会通过关闭 X 或取消按钮关闭。控制台不记录任何错误。当我按 ESC 或灰色透明覆盖层中的任何点时，它确实会关闭。

为了确保我已禁用项目中的所有其他 JavaScript 代码。我已经盯着这个看了一个小时了。我缺少什么？以前已经做过很多次了，但我对这种行为感到困惑......

Answer 1

我刚刚发现，在 bootstrap 4 中，如果您使用 javascript 创建模式并将其添加到文档中以显示它，它不会为数据关闭操作设置任何侦听器事件，因此必须自己执行此操作：

$('#modalId').on('click', 'button.close', function (eventObject) {
    $('#modalId').modal('hide');
});

Answer 2

检查您是否有

data-dismiss

属性，如下

在 X 图标中

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

关闭按钮

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

如果您有它们，请复制并粘贴您的代码，这可能有助于确定导致问题的原因

Answer 3

关闭按钮有

data-dismiss="modal"

吗？

来自引导程序：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

您可以尝试手动切换或隐藏，

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

Answer 4

好吧，在我确定排除了任何外部因素之后，我尝试使用 BootstrapCDN.com 中的引导 javascript 文件，而不是使用 Composer 引入的版本。你知道吗？我拉入的版本中有一个错误导致了这种行为......

Answer 5

此信息对我们中的一些人很有用。 Bootstrap 的较新版本（如 v5）有一个小功能，如果没有该功能，按钮（关闭）或（X）将无法关闭模态框。您只需将 -bs 添加到 data-dismiss 属性即可。

<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>