Bootstrap 模式不会在 X 或关闭按钮上关闭，但在 ESC 或点击叠加层时会关闭

Question

好吧，标题说明了一切。我有一个默认的（从 Bootstrap 文档复制的）模态，它使用 $('#myModal').modal(); 打开，但在任何情况下模态都不会用关闭 X 或取消按钮关闭。控制台不记录任何错误。当我按 ESC 或在灰色透明覆盖层中的任何一点时，它确实会关闭。

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

Answer 1

关闭按钮有没有data-dismiss="modal"？

来自bootstrap：

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

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

$('#myModal').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

好吧，在确定排除任何外部因素后，我尝试使用 BootstrapCDN.com 中的 bootstrap javascript 文件，而不是使用 composer 引入的版本。你知道吗？我引入的版本中存在导致此行为的错误...

Answer 4

我刚刚发现 bootstrap 4 如果您使用 javascript 创建模态并将其添加到文档以显示它，它不会为数据设置任何侦听器事件-取消操作，所以不得不自己做：

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

Bootstrap Modal not closing on X or Close button, but does on ESC or clicking in the overlay