Bootstrap modal ajax表单提交后关闭残留半透明背景问题求解

核心问题1：事件重复绑定导致模态框状态异常 #

当前JS代码把表单submit事件绑定嵌套在了提交按钮的click事件内部，每次点击提交按钮都会新增一次submit事件绑定，多次触发后会导致Bootstrap模态框的状态管理混乱，遮罩层无法被正常销毁。

修复方案：直接绑定表单提交事件 #

移除嵌套的click事件绑定，直接监听表单的submit事件即可，修改后的AJAX代码如下：

<!--提交已选课程的AJAX逻辑-->
<script type="text/javascript">
    $(document).ready(function(){
        loadNewCourse();
        loadDelTable();

        // 移除原有的click嵌套逻辑，直接绑定表单submit事件
        $("#form").submit(function(e){ 
            e.preventDefault();
            $.ajax({
                url: 'cos_reg.php',
                type: 'POST',
                cache: false,
                async: false,
                data: $(this).serialize(),
                success: function(data){
                    loadNewCourse();
                    loadDelTable();
                    // 隐藏模态框
                    $( '#regModal' ).modal('hide');
                    // 兜底清除残留遮罩和body的模态框专属样式
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open').css('overflow', 'auto');
                    swal({
                        position: "top-end",
                        type: "success",
                        title: "选课成功",
                        showConfirmButton: false,
                        timer: 2000
                    })
                },
                error: function(data){
                    swal("出错了...", "选课失败", "error");
                }
            });
        });

       function loadNewCourse(){
            $.ajax({
                url: 'processReg.php',
                type: 'POST',
                cache: false,
                async: false,
                data: {
                    loadit: 1
                },
                success: function(disp){
                    $("#reveal").html(disp).show();
                }
            });
        }
        
        function loadDelTable(){
            $.ajax({
                url: 'delete_tbl.php',
                type: 'POST',
                cache: false,
                async: false,
                data: {
                    loadDel: 1
                },
                success: function(deldisp){
                    $("#showRegtbl").html(deldisp).show();
                }
            });
        }
    });
</script>

其他兼容问题排查 #

• 如果你使用的是Bootstrap 5版本，需要将模态框关闭方法替换为Bootstrap 5的原生API，同时把HTML代码中关闭按钮的data-dismiss属性改为data-bs-dismiss
• 检查模态框的z-index设置，确认没有和其他自定义元素的层级冲突，当前设置的z-index:10000如果高于遮罩层默认层级，也有可能导致遮罩残留

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