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

Question

在 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

Answer 1

创建一个新的modal实例，然后调用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，那么请仔细阅读所有更改。

Answer 2

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>

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

Answer 3

根据 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'));
}

Answer 4

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

我还添加了一个选项，可以暂时删除 fade 效果，如果您想在页面加载后立即打开它的话。要实现它，只需要使用 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>

Answer 5

在 Bootstrap 5 中 open/show 模式对话框的一个简单方法是在 HTML 中创建一个 link 来完成它（它可以是不可见的），然后 create/trigger link 上的点击事件。

这是一个例子：

A link 打开模态对话框：

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

触发点击事件的JavaScript代码link:

triggerEvent(test,'click');

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

Answer 6

[Bootstrap 5]

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

如果您使用捆绑器（Webpack、Rollup…），您可以使用/js/dist/*.js 文件，这些文件是 UMD 就绪的。

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

在您的 js 文件顶部添加导入语句

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
});

Answer 7

[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

Answer 8

最快的方法

new bootstrap.Modal($('#MyModal')).show();

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

Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)

javascript

bootstrap-5