无法在 Bootstrap 5 中使用 JavaScript 打开 Modal答案

【问题标题】：Cannot get Modal in Bootstrap 5 to open up using JavaScript无法在 Bootstrap 5 中使用 JavaScript 打开 Modal
【发布时间】：2021-09-13 23:27:27
【问题描述】：

我目前正在尝试使用引导程序 5 创建一个加载对话框。

所以我做的第一件事就是将对话框从文档复制到我的测试 html 中：

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id = "waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>

然后我写了一点JS尝试按照文档中的说明打开它

  var myModal = document.getElementById('waitDialog');
  var modal = bootstrap.Modal.getInstance(myModal)
  modal.show();

这直接来自https://getbootstrap.com/docs/5.0/components/modal/#via-javascript的文档

我不工作，因为 modal 为空。我做错了什么？

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-modal

【解决方案1】：

首先，您缺少new 关键字。其次，您调用 bootstrap.Modal 函数，将其传递给错误 id 的元素。

此代码将起作用：

var myModal = document.getElementById("staticBackdrop");
  var modal = new bootstrap.Modal(myModal);
  modal.show();

【讨论】：

【解决方案2】：

您的代码有两个问题。

首先，getInstance方法返回了与DOM元素关联的模态实例，既然返回了null，说明模态还没有被初始化。还有另一种方法getOrCreateInstance，如果没有找到实例，它应该创建实例（https://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance）。

其次，模态元素是包含div，类名为modal，而不是id为waitDialog的元素。

因此，理想情况下，您的代码应该类似于 https://jsfiddle.net/7m1oqc9d/3/

var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog" id="waitDialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   Some Stuff. 
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
            </div>
        </div>

【讨论】：