Bootstrap Modal点击无响应，提示非函数问题求助

核心问题分析 #

• 多版本库冲突：页面同时引入了Bootstrap 3和Bootstrap 5的CSS、JS文件，以及两个不同版本的jQuery。不同版本Bootstrap的API不兼容，会导致模态框相关函数被覆盖或无法正常初始化。
• DOM元素获取错误：事件监听代码中尝试获取id="myModal"的元素，但实际模态框的id是exampleModal，导致myModal变量为null，调用addEventListener时触发“不是函数”的错误。
• 资源加载顺序与冗余：Bootstrap 5依赖Popper.js，虽然最后加载了依赖，但前面的旧版本库已经干扰了全局环境，且重复引入的资源完全多余。

修复步骤 #

1. 清理冲突资源：删除Bootstrap 3及旧版本jQuery的引入，只保留Bootstrap 5的CSS和JS资源。
2. 修正DOM选择器：将事件监听中的document.getElementById('myModal')改为document.getElementById('exampleModal')，确保正确获取模态框元素。
3. 规范资源顺序：Popper.js放在Bootstrap JS之前加载，CSS置于<head>，JS放在<body>末尾保证DOM加载完成后执行。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudioPick</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="CSS/studiodash.css">

    <script>
        function menuToggle() {
            const toggleMenu = document.querySelector(".menu");
            toggleMenu.classList.toggle("active");
        }

        // SignOut
        function signOut() {
            auth.signOut();
            alert("SignOut Successfully from System");
            window.location.href = "login.html?error";
            alert("No active user please sign or sign up.");
        }
    </script>
</head>
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg"
            viewBox="0 0 16 16">
            <path fill-rule="evenodd"
                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z">
            </path>
        </svg>
        Add Service
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div 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>

    <script>
        // 修正元素选择器，匹配实际模态框id
        var myModal = document.getElementById('exampleModal');

        myModal.addEventListener('show.bs.modal', function (event) {
            // 注意：需提前定义data变量，否则会触发未定义错误，可根据业务逻辑补充
            // if (!data) {
            //     return event.preventDefault() // stops modal from being shown
            // }
        });
    </script>

    <!-- Bootstrap 5 依赖资源 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
</body>
</html>

额外说明 #

• Bootstrap 5支持原生JS调用，若无需jQuery可完全移除相关引入。
• 事件监听中的data变量需根据实际业务逻辑提前定义，避免出现未定义错误。

内容的提问来源于stack exchange，提问作者Grmln