Bootstrap 模式不适用于版本 4.4.1

Question

我有一个普通的模态对话框。它使用 Bootstrap 4.1.0 版。现在我升级到版本 4.4.1，它不再工作了。这是为什么？我认为这两个版本在模态对话框方面没有区别。

<div class="modal fade" id="1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="update" method="POST">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel_1">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Test

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                    <button type="submit" class="btn btn-primary">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#1">
    Open Modal
</button>

在此处查找 Bootstrap 版本：

更新 1：

以下解决方法有效：

    $('button[data-toggle=modal]').click(function(){      
      $(".modal").modal();
    });

Answer 1

这与您的模态 id 是数字有关。如果您将模式的 id 更改为 _1 并将按钮的 data-target 更改为 #_1 它 starts working.

~~进一步研究这个问题，结果在你的例子中，~~

document.getElementById('1')

... return 模式，但是

document.querySelector('#1')

...returns 一个错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.

我大胆的猜测是，在内部，Bootstrap 使用 querySelector 将按钮的 data-target 属性传递给它。但是，由于没有显示错误，我猜这一切都发生在 try/catch 块中。不过，我可能是错的，我只是在猜测。

...并且， 正在寻找 even further 问题，结果发现选择器以数字开头 在技术上是有效的，但它们需要进一步处理。也就是说，如果您真的想使用数字 ID，您的 <button>s data-target 属性必须是 data-target="#" 或 data-target="#[=27=]0031"。

看到了working.

它甚至 Bootstrap 都不是特定的，这就是 DOM 选择器的工作方式：

# { color: red; }
. { color: blue; }

<span id="1">red</span>
<span class="2">blue</span>

还有一件事（不直接相关）：您缺少所需的 popper.js 导入（参见 Quickstart）。弹出窗口、工具提示等是必需的，它们直接放在 <body> 上，但将它们正确定位，就好像它们是被悬停的元素的子元素一样，以便弹出窗口可以溢出带有 overflow: hidden 的父元素。作为一般规则，您希望包含它。

Bootstrap 模式不适用于版本 4.4.1

Bootstrap Modal does not work with Version 4.4.1

modal-dialog

twitter-bootstrap