引导模式未显示在节点/快递服务器中答案

【问题标题】：Bootstrap Modal not showing up in node/express server引导模式未显示在节点/快递服务器中
【发布时间】：2021-08-08 04:27:21
【问题描述】：

我知道这个问题在这里已经被打死了，但我一生都无法弄清楚为什么我的模态不会出现。我认为这是引导程序的采购问题，但我尝试了这么多脚本源组合，但无法让它们中的任何一个工作。这是一个快速服务器项目，jquery 是通过 vendor 文件夹获取的，而 bootstrap 是通过 npm 添加的。

<!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">
    <script src="./vendors/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="./scripts/client.js"></script>
    <link rel="stylesheet" href="./styles/style.css">
    <title>Weekend To-Do App</title>
</head>
<body>
    
    <!-- End Modal -->
    <main role="main">
        <!-- Modal Popup -->
        <div class="modal fade" id="warningModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1>Warning</h1>
                    </div>
                    <div class="modal-body">
                        <p>You are about to delete a task. Please confirm.</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default">Cancel</button>
                        <button class="btn btn-danger">Delete</button>
                    </div>
                </div>
            </div>
        </div> 
            <!-- end modal -->
        <div>
            <a href="#" data-toggle="modal" data-target="#warningModal">More info</a>
        </div>

【问题讨论】：

问题在于你的 jqurey

标签： jquery node.js bootstrap-modal

【解决方案1】：

我刚刚换了你的线

<script src="./vendors/jquery.js"></script>

与

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

模态开始显示。

【讨论】：

我试过了，但它最终破坏了我的 $.ajax 调用。似乎是因为slim版本去掉了ajax。
你是对的，不要使用 slim 就使用 jquery。