引入header.html头文件后，为什么我的模态框一闪就消失了？

Question

我引入头文件的方式：

$.get("header.html",function (data) {
        $("#header").html(data);
    });

点击按钮后触发静态框：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

静态框：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <form id="form_data">
                <div class="modal-body">
                    user_id: <input type="text" id="user_id" name="user_id"/>
                    name: <input type="text" id="user_name" name="user_name"/>
                    <input type="hidden" id="act" value="add" name="act"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

Answer 1

您好题主！
本答案参考GPT-4o，由爪磕整理并总结，希望对您有所帮助！

---

你的问题描述表明在引入 header.html 后，你的模态框一闪即消失。这个问题可能是由于在引入的 header.html 文件中，可能存在与模态框相关的JavaScript或CSS代码没有正确加载，或者是因为DOM还没有完全准备好。

以下是几个可能的解决方案：

确保所有必要的CSS和JS文件已正确加载

确保在 header.html 中包含了Bootstrap的CSS和JS文件，同时确保在引入 header.html 后，这些文件已经加载完毕。

<!-- header.html -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

确保模态框的事件在DOM准备好后绑定

当你通过 $.get 动态加载 header.html 时，确保模态框的事件在内容加载完成后绑定。你可以使用 $.get 的回调函数来确保这一点：

$(document).ready(function() {
    $.get("header.html", function(data) {
        $("#header").html(data);
        
        // 确保模态框的事件在header加载完成后绑定
        $('button[data-toggle="modal"]').on('click', function() {
            var target = $(this).data('target');
            $(target).modal('show');
        });
    });
});

检查模态框的HTML结构是否正确

确保模态框的HTML结构是正确的，没有缺少任何必要的属性或标签：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <form id="form_data">
                <div class="modal-body">
                    user_id: <input type="text" id="user_id" name="user_id"/>
                    name: <input type="text" id="user_name" name="user_name"/>
                    <input type="hidden" id="act" value="add" name="act"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

确认jQuery和Bootstrap的顺序

确保jQuery在Bootstrap JS之前加载，否则会引发依赖错误：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

检查是否有其他JavaScript错误

打开浏览器的开发者工具（通常按F12），检查控制台是否有其他JavaScript错误，这些错误可能会影响模态框的正常显示。

通过这些步骤，你应该能够定位并解决模态框一闪即消失的问题。如果问题仍然存在，请提供更多的代码细节或错误信息以便进一步诊断。