Bootstrap 通过 windows.onload 启动模式会引发“未找到功能”错误答案

【问题标题】：Bootstrap launching a modal by windows.onload provokes "function not found" errorBootstrap 通过 windows.onload 启动模式会引发“未找到功能”错误
【发布时间】：2020-07-27 00:06:43
【问题描述】：

实际上，我正在尝试让这段代码在 bootstrap 5.0.0 alpha 下运行，示例在 bootstrap 5 文档中给出。由于它不起作用，我使用当前的 bootstrap 4 版本以及 bootstrap 4 文档中的示例之一进行了尝试。两次我都遇到相同的错误消息：

Uncaught TypeError: myModal.show is not a function at window.onload (cookieModal.php:180)

我将来自 boostrap 4 站点的示例放在基本引导代码中，并添加了带有 window.onload 函数的脚本，以在站点加载后触发模式：

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Bootstrap 4 Starter Template</title>
  </head>
  <body>
    <h1>Hello</h1>

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

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <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>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script type="text/javascript">

    window.onload = function(){
       var myModal = document.getElementById('exampleModal');
       myModal.show();
    }

    </script>

  </body>
</html>

Bootstrap 5 alpha 中的错误与 Bootstrap 4 中的错误相同。在这两种情况下，当您按下按钮时，至少会出现模式。

由于 boosttrap 5 已经放弃了 jQuery，我对 jQuery 解决方案不感兴趣。我更喜欢使用 window.onload 启动模式。

我在 var myModal 声明之后插入了一个警告，它表明 myModal 是一个 DIV 元素。所以至少 myModal 似乎找到了 exampleModal 的 id。

提前谢谢你冈瑟

【问题讨论】：

标签： bootstrap-modal

【解决方案1】：

又经过一周的谷歌搜索，我在Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)找到了答案

window.onload = function(){
   var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
   myModal.show();
}

有效！！！

【讨论】：