如何使用 vanilla javascript 调用 bootstrap5 模态？答案

【问题标题】：how to call bootstrap5 modals using vanilla javascript?如何使用 vanilla javascript 调用 bootstrap5 模态？
【发布时间】：2021-02-24 01:10:43
【问题描述】：

有个按钮

<button onclick="showModal('@Url.Action("EditUserProfile","Profile",null,Context.Request.Scheme)','ویرایش پروفایل کاربر');"
                                class="btn btn-warning w-100 mb-3">
                            ویرایش اطلاعات
                        </button>

有一个模态

<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modal-body" class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

当我单击按钮时，我只想使用原生 JavaScript 显示模式

async function showModal(url, title) {    
    let modalEl = document.querySelector('#modal');    
    let bsModal = Bootstrap.Modal.getInstance(modalEl);    
    let modalTitle = document.querySelector('#modal-title');    
    let modalBody = document.querySelector('#modal-body');   
    let requestPage = await fetch(url);
    let requestPageResponse = await requestPage.text();    
    modalTitle.innerHTML = title;    
    modalBody.innerHTML = requestPageResponse;
    bsModal.show(); 

}

当我尝试这个时，我得到了这个错误

Uncaught (in promise) ReferenceError: Bootstrap is not defined 在showModal

<!DOCTYPE html>

<html lang="fa-IR" dir="rtl">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <title>@ViewBag.Title</title>

    <script src="https://kit.fontawesome.com/0842d2bf89.js" crossorigin="anonymous"></script>
    <link href="~/Bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="~/css/main.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wraper">
        <vc:top-nav></vc:top-nav>
        <div class="main-content">
            @RenderBody()
        </div>
        <vc:footer></vc:footer>
    </div>
    

    <script src="~/Bootstrap/bootstrap.min.js"></script>
    <script src="~/js/navbar.js"></script>
    @RenderSection("scripts", false)
</body>
</html>

【问题讨论】：

Documentation on showing Bootstrap 5 Modal via JavaScript

标签： javascript html bootstrap-5

【解决方案1】：

您需要确保 twitter-bootstrap 脚本位于您的 showModal() 函数上方

类似：

<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello, world!</h1>
    <!-- This script must be above -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"></script>

    <!-- This script must be below your boostrap script -->
    <script src="YOUR SHOW MODAL ASYNC FILE PATH"></script>
  </body>
</html>

在您的 showModal 函数中

改变这一行

let bsModal = Bootstrap.Modal.getInstance(modalEl);

到这里

let bsModal = new boostrap.Modal(modalEl)

见docs

【讨论】：

我已经这样做了，我正在使用 asp.net core mvc。我之前已经在布局文件中调用了 bootstrap 5 脚本，并且这个脚本在 bootstrap 脚本之后呈现
让我们看看你的布局是什么样的
我把布局文件放在问题的末尾
不，您编辑的是我的答案，而不是您的问题
尝试在@RenderSection上方使用@Scripts.Render("~/Bootstrap/bootstrap.min.js")