Bootstrap 模态未显示（存在 JS 文件）

Question

Bootstrap JS放在body末尾，在main.js

之前

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
    <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">
   
</head>

<body>
    <div class="container">
        
        <div class="position-relative mt-5 ">
            <form class="position-absolute top-0 start-50 translate-middle-x w-100" id="loginForm">
                
               
                <div class="d-grid gap-2 mt-4">
                    <button type="button" class="btn btn-success" data-toggle="modal"
                        data-target="#exampleModalScrollable" id="createAccountBtn">Create an Account</button>
                </div>
                <hr />
                
            </form>
        </div>
    </div>
     <!-- Modal -->
     <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle">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>
    <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>
    <script src="main.js"></script>
</body>

</html>

我希望 #createAccountBtn 能够切换放置在容器下方的模式，但由于某种原因它不起作用。我也包含了 bootstrap javascript 并浏览了所有相关答案。

Answer 1

从您的 bootstrap 资产中我可以看出您正在使用 Bootstrap v5.0

如果你检查 Bootstrap v5.0 documentation on modals 你可以看到 Bootstrap 5 使用 [=13= 而不是像以前那样使用 data-toggle ].同样适用于 data-target 属性。

而不是：

<button type="button" class="btn btn-success" data-toggle="modal"
                    data-target="#exampleModalScrollable" id="createAccountBtn">Create an Account</button>

使用:

<button type="button" class="btn btn-success" data-bs-toggle="modal"
                    data-bs-target="#exampleModalScrollable" id="createAccountBtn">Create an Account</button>

如果您想获得更多信息，请再次确保查看 Bootstrap v5.0 Modal 上的文档。

JSFiddle demo

Bootstrap 模态未显示（存在 JS 文件）

Bootstrap modal not showing up (JS file present)

twitter-bootstrap

bootstrap-modal