javascript - 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

最佳答案

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. [source]

如何通过 Vanilla JavaScript 使用

Create a modal with a single line of JavaScript:

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

source
一个简单的例子:

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 元素？

关于javascript - Bootstrap V5 手动调用模态 myModal.show() 不起作用( Vanilla javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62827002/

javascript - Bootstrap V5 手动调用模态 myModal.show() 不起作用( Vanilla javascript)

上一篇：swift - 在 Xcode 12 中使用 @main

下一篇：python - 如何将列表拆分为以分隔符开头的子列表？