引导模式不弹出答案

【问题标题】：Bootstrap Modal doesn't popup引导模式不弹出
【发布时间】：2024-05-17 23:15:01
【问题描述】：

以下是我从 Bootstrap 网站复制的代码。我不明白为什么它不工作，即使它在其网站上作为演示工作。

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

<!-- Modal -->
<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">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://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 src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

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

我应该如何调试这个？

【问题讨论】：

标签： javascript html css django bootstrap-4

【解决方案1】：

确保在引导之前加载 jquery：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

在此处查看示例：https://jsfiddle.net/xpsLfgzn/1/ 这就像您的代码的魅力一样。

【讨论】：

兄弟，早些时候在 jquery 之前加载引导程序时，没有任何显示。我接受了您的建议并在引导程序上方加载了 jquery。当我点击Launch Demo 按钮时，背景变得模糊，但没有弹出任何内容。
你能帮帮我吗？
您可以在这里发布您的新示例吗？
这是我的代码的 jsfiddle 版本。 jsfiddle.net/MeetOG/wozcrsdk/7 它适用于小提琴，但不适用于我的系统。怎么样？
嗯，取决于你的系统意味着什么。你的文件结构如何？您何时加载脚本，何时尝试访问处理程序？你什么时候分配处理程序？等等。你可以在 GitHub 上的任何存储库中签入它吗？

【解决方案2】：

Bootstrap = 样式库 + 一堆 jQuery 插件

顺便说一句，如果你只需要bootstrap风格，你根本不需要为jQuery和bootstrap引入js文件

【讨论】：

但是对于一个模态你需要 jquery 和 bootstrap.js