解决Bootstrap Modal AJAX提交后背景残留问题

$('#submit').click(function(){ // 每次点击都会执行
    $("#form").submit(function(e){ // 每次点击都会绑定一个新的submit事件处理器
        e.preventDefault();
        // ... AJAX 逻辑 ...
    });
});

$(document).ready(function() {
    // 绑定表单提交事件
    $("#form").submit(function(e) {
        e.preventDefault(); // 阻止表单的默认提交行为

        // 执行 AJAX 提交
        $.ajax({
            url: 'cos_reg.php',
            type: 'POST',
            cache: false,
            async: true, // 推荐使用异步，避免UI阻塞
            data: $(this).serialize(),
            success: function(data) {
                // AJAX 成功后执行的操作
                loadNewCourse();
                loadDelTable();

                // 关键：在这里关闭模态框
                $('#regModal').modal('hide');

                // 显示成功提示
                swal({
                    position: "top-end",
                    type: "success",
                    title: "Registration successful",
                    showConfirmButton: false,
                    timer: 2000
                });
            },
            error: function(xhr, status, error) {
                // AJAX 失败处理
                console.error("AJAX Error:", status, error);
                swal("Oops...", "Registration failed.", "error");
            }
        });
    });

    // 其他初始化函数
    loadNewCourse();
    loadDelTable();

    // 如果模态框初始状态是隐藏的，确保它不会在加载时显示
    // $('#regModal').modal('hide'); // 如果模态框默认是隐藏的，这行可能不需要

    // 示例：如何显示模态框（例如通过一个按钮）
    // $('#showModalButton').click(function() {
    //     $('#regModal').modal('show');
    // });

    // 辅助函数（根据原代码保留）
    function loadNewCourse() {
        $.ajax({
            url: 'processReg.php',
            type: 'POST',
            cache: false,
            async: true, // 推荐使用异步
            data: { loadit: 1 },
            success: function(disp) {
                $("#reveal").html(disp).show();
            }
        });
    }

    function loadDelTable() {
        $.ajax({
            url: 'delete_tbl.php',
            type: 'POST',
            cache: false,
            async: true, // 推荐使用异步
            data: { loadDel: 1 },
            success: function(deldisp) {
                $("#showRegtbl").html(deldisp).show();
            }
        });
    }
});

<div class="modal fade" id="regModal" role="dialog" aria-hidden="true" tabindex="-1" style="z-index:10000;">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 style="margin-bottom:0;text-align:center;">Course Registration</h5>
                <!-- 确保此按钮有 data-dismiss="modal" -->
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="#"  id="form" method="POST" action="#">
                    <!-- ... 表单内容 ... -->
                    <div style="width:100%;margin:0;margin-top:10px;text-align:right;">
                        <button class="btn btn-md btn-primary" id="submit" type="submit" name="submit" style="width:100%;" value="" >Register</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="text-align:left;">
                <!-- 确保此按钮有 data-dismiss="modal" -->
                <button type="button" class="btn btn-default" id="close" style="float:left;background:lightgrey;color:#000;" data-dismiss="modal" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>