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

Question

有一个按钮

<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 at 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>

Answer 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

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

how to call bootstrap5 modals using vanilla javascript?

html

javascript

bootstrap-5