Bootstrap V5 手动调用模式 myModal.show() 不起作用（vanilla javascript）

在 bootstrap 5 中手动调用模式的正确方法是什么？

我想在页面打开时显示模态。我试过这个：

我的模态

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        ...
        ...
        ...
    </div>
  </div>
</div>

我的脚本是

var myModal = document.getElementById('myModal');
document.onreadystatechange = function() {

    myModal.show();
}

但在控制台日志中出现此错误：

  myModal.show is not a function
    at HTMLDocument.document.onreadystatechange

原文由 mjade 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 900

模态插件通过数据属性或 JavaScript 按需切换隐藏内容。它还将 .modal-open 添加到以覆盖默认滚动行为，并生成一个 .modal-backdrop 以提供点击区域，以便在点击模态外部时关闭显示的模态。 [资源]

如何通过 Vanilla JavaScript 使用

使用一行 JavaScript 创建一个模式：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

资源

一个简单的例子：

 var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
  myModal.show();
};

 <!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
      crossorigin="anonymous"
    />
    <title>Hello, world!</title>
  </head>
  <body>

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- JavaScript and dependencies -->
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
      crossorigin="anonymous"
    ></script>

    <script src="./app.js"></script>
  </body>
</html>

至于您的代码， 您没有按照正确的方式在 Vanilla JavaScript 中显示/切换模式。你为什么期望 myModal.show() 发生而 myModal 只是一个 DOM 元素？

原文由 Mateen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Bootstrap V5 手动调用模式 myModal.show() 不起作用（vanilla javascript）

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译