时间戳

首页 > 解决方案 > 引导模式未显示（存在 JS 文件）

twitter-bootstrap - 引导模式未显示（存在 JS 文件）

问题描述

Bootstrap JS 位于 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 并浏览了所有相关的答案。

标签： twitter-bootstrapbootstrap-modal

解决方案

从您的引导资产中，我可以看到您正在使用 Bootstrap v5.0

如果您查看有关 modals 的 Bootstrap v5.0 文档，data-toggle您会发现Bootstrap 5使用data-bs-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 演示

推荐阅读