javascript - Bootstrap V5 手动调用模态 myModal.show() 不起作用（香草 javascript）

Question

在引导程序 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

score 23 · Accepted Answer

模态插件通过数据属性或 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 元素时发生？

score 16 · Accepted Answer

创建一个新的模态实例，然后调用 show 方法（参见使用要点）

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()

参考：https ://v5.getbootstrap.com/docs/5.0/components/modal/#options

注意：Bootstrap v5 不再使用 jquery，而是使用 javascript。bootstrap v5 中有很多变化，如果你在一家公司工作并且愿意使用 Bootstrap v5，那么请仔细阅读所有的变化。

score 5 · Accepted Answer

我还搜索了在页面加载时自动打开模式的解决方案，并在以下解决方案中解决了它。如果你想让它自动打开，你可以在正常的引导语法中添加一个data-auto-open属性。如果未设置该属性，模态是否也以标准方式工作。

如果您想在页面加载后立即打开淡入淡出效果，我还添加了一个选项来临时移除淡入淡出效果。要做到这一点，只需使用data-auto-open="instant"而不是空的data-auto-open属性。在它关闭一次并且您想手动重新打开它之后，它会再次具有淡入淡出效果。

Bootstrap 5.0.0-Beta3的 TypeScript 中的工作解决方案如下所示：

// @ts-ignore
import { Modal } from 'bootstrap';

window.addEventListener('DOMContentLoaded', (event) => {
    const selector = '[data-auto-open]';
    const modalElement: HTMLElement | null = document.querySelector(selector);

    if (!modalElement) {
        return;
    }

    const mode = modalElement.dataset.autoOpen;
    const fade = modalElement.classList.contains('fade');

    if (fade && mode === 'instant') {
        modalElement.classList.remove('fade');
    }

    const modal = new Modal(modalElement, {});

    if (fade && mode === 'instant') {
        // There's currently a bug in the backdrop when the fade class 
        // will be added directly after the modal was opened to have the
        // close animation
        // modalElement.addEventListener('shown.bs.modal', function (event) {
        modalElement.addEventListener('hidden.bs.modal', function (event) {
            modalElement.classList.add('fade');
        }, {once : true});
    }

    modal.show();
}, {once : true});

HTML将是标准的：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-auto-open>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    Example Modal title
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

score 3 · Accepted Answer

根据 OP 提供的 javascript 代码，我认为这里的实际目标是通过 DOM 元素访问组件。我也在寻找一种方法来做到这一点，所以想分享我找到的（或未找到的）。

v4-它是可能的并且通常与早期版本一起使用。在 v4 中，我们可以很容易地将它与 jQuery 一起使用，尽管该组件是由数据属性而不是直接从 js 初始化的。

$('#myModal').modal('show');

v5.0.0-beta2在新版本中，文档中为另一种类型的组件提供了一个非常有前途的 api 示例。但是，它目前似乎没有工作。（https://getbootstrap.com/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions）

var myModal = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModal) 
console.log(modal) // null

由于所有组件都使用相同的基本组件，人们可能会认为可以通过使用 getInstance api 方法来获取模态以及下拉、折叠、轮播等其他模式的实例，但这是不可能的。至少对于当前的测试版。

最后一点：仍然可以在 v5 脚本之前包含 jQuery 并实现这一点。（https://codepen.io/cadday/pen/Jjbvxvm）

window.onload = function() {
  console.log(jQuery('#myModal').modal('show'));
}

score 1 · Accepted Answer

在 Bootstrap 5 中打开/显示模式对话框的一种简单方法是在您的 HTML 中创建一个链接来执行此操作（它可以是不可见的），然后在链接上创建/触发一个点击事件。

这是一个例子：

打开模式对话框的链接：

<a id=test data-bs-toggle="modal" href="#MODAL-ID"></a>

在此链接上触发点击事件的 JavaScript 代码：

triggerEvent(test,'click');

function triggerEvent(el,evName)
    {el.dispatchEvent(new CustomEvent(evName,{}));}

score 1 · Accepted Answer

[引导 5]

插件可以单独包含（使用 Bootstrap 的单个 js/dist/*.js），或者使用 bootstrap.js 或缩小的 bootstrap.min.js 一次全部包含（不要同时包含两者）。

如果您使用捆绑器（Webpack、Rollup...），您可以使用已准备好 UMD 的 /js/dist/*.js 文件。

例如，如果您只想从 Bootstrap 5 导入 Modal 插件，您可以这样做：

在 js 文件的顶部添加 import 语句

import Modal from 'bootstrap/js/dist/modal';

然后在单击按钮元素时显示模式，例如：

const myButton = document.getElementById('my-button-id');
const myModal  = document.getElementById('my-modal-id');

const modal = new Modal(myModal); // Instantiates your modal

myButton.addEventListener('click', () => {
    modal.show(); // shows your modal
});

score 0 · Accepted Answer

[ Bootstrap 5+，原版 js，bootstrap作为全局导入]

let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModal')) // Returns a Bootstrap modal instance
// Show or hide:
modal.show();
modal.hide();

在此处查看更多信息：https ://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance

javascript - Bootstrap V5 手动调用模态 myModal.show() 不起作用（香草 javascript）

7 回答 7

Related

Reference