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

Posted

技术标签:

【中文标题】Bootstrap V5 手动调用模态 myModal.show() 不起作用（香草 javascript）【英文标题】：Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript) 【发布时间】：2020-10-30 18:21:58 【问题描述】：

在 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

【问题讨论】：

看起来你没有 jquery - show() 是 jquery 特有的东西。 我使用 bootstrap v5 而不是 v4.. v5 应该是纯 javascript？ 这能回答你的问题吗？ How can I trigger a Bootstrap modal programmatically? 尝试：var myModal = new bootstrap.Modal(document.getElementById('myModal')); @Symphonic 的答案是正确的，你不要发表评论，如果你想让我删除我的答案，他/她会选择你的答案和 Symphonic。 【参考方案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，那么请仔细阅读所有的变化。

【讨论】：

正是我正在寻找的答案，但我如何使用 jQuery 做到这一点？ 这在 bootstrap v5 中有记录。链接：getbootstrap.com/docs/5.0/components/modal/#via-javascript【参考方案2】：

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

如何通过 Vanilla JavaScript 使用

用一行 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 元素？

【讨论】：

你的源链接有问题。 现在已修复。谢谢。【参考方案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'));

【讨论】：

为了让 bootstrap.Modal.getInstance 工作，您需要创建实例。为此，您最好在创建模式时执行“new bootstrap.Modal(myModal)”。 你告诉我要找到我们在 jquery 中使用 $('#myModal') 和 $('#exampleModal').modal('show'); 的元素，这将显示模态 $('#exampleModal').modal('hide'); 将关闭模态【参考方案4】：

我还搜索了在页面加载时自动打开模式的解决方案，并在以下解决方案中解决了这个问题。 如果你想让它自动打开，你可以将 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>

【讨论】：

【参考方案5】：

在 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,));

【讨论】：

【参考方案6】：

[引导程序 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
);

【讨论】：

以上是关于Bootstrap V5 手动调用模态 myModal.show() 不起作用（香草 javascript）的主要内容，如果未能解决你的问题，请参考以下文章

如何检查 bootstrap-4 模态是不是已经打开？

bootstrap中的模态框插件，点击遮盖层，模态框不消失，怎么让消失

Bootstrap v5.1 模态不会从 <body> 中删除滚动

BootStrap3 的模态框重有一个保存按钮.点击保存如何关闭模态框.隐藏关闭不起作用..

bootstrap的模态框的使用

在移动设备中隐藏 Bootstrap 模态