Bootstrap 5调用hide方法隐藏模态框时背景遮罩无法消失问题求助

问题根因 #

• 你使用的myModal.modal({backdrop: false})是Bootstrap 3的语法，Bootstrap 5已不再支持该调用方式，因此无效
• 模态框DOM结构嵌套错误，你的HTML代码中<form>标签包裹了modal-content的闭合标签，结构异常会导致Bootstrap内置的遮罩销毁逻辑无法正常执行
• 同时还存在表单ID和提交按钮ID重复的问题，也可能干扰DOM事件的正常触发
• 可能存在模态框实例重复初始化、调用hide方法时实例状态异常的问题

方案1：先修正HTML结构（优先执行） #

调整标签嵌套顺序和重复ID问题：

<div class="modal" id="scheduleMeetingModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-between">
                <h5 class="modal-title" id="scheduleMeetingModalLabel"><?php echo lang('App.scheduleMeeting'); ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <?php echo form_open_multipart('schedule_meeting', 'id="schedule_meeting" class="needs-validation" novalidate=""'); ?>
                <div class="modal-body">
                    <div class="row form-row">
                        <div class="col-md-6">
                            <div class="mb-3 feature-info-content">
                                <label class="form-label" for="day_one"><?php echo lang('App.day'); ?> *</label>
                                <input class="form-control" type="date" id="day_one" required name="day_one">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3 feature-info-content">
                                <label class="form-label" for="time_one"><?php echo lang('App.startTime'); ?> *</label>
                                <input class="form-control" type="time" id="time_one" required name="time_one">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- 修正提交按钮和表单ID重复的问题 -->
                    <button type="submit" id="schedule_meeting_submit" class="btn btn-primary ms-5"><?php echo lang('App.submit'); ?></button>
                </div>
            <?php echo form_close(); ?>
        </div> <!-- modal-content闭合标签移到表单关闭之后 -->
    </div>
</div>

方案2：优化模态框隐藏逻辑 #

调整隐藏代码，确保拿到正确实例，同时兼容实例状态异常时的手动清理逻辑：

const myModalEl = document.getElementById('scheduleMeetingModal');
// 用getOrCreateInstance避免实例不存在的问题，保持原配置backdrop: 'static'
const myModal = bootstrap.Modal.getOrCreateInstance(myModalEl, {backdrop: 'static'});
myModal.hide();

// 等待模态框过渡动画结束后手动清理残留的遮罩和body样式
setTimeout(() => {
  // 移除所有残留的遮罩元素
  document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
  // 恢复body的默认样式
  document.body.classList.remove('modal-open');
  document.body.style.removeProperty('padding-right');
}, 300); // 300ms对应Bootstrap模态框默认的过渡动画时长，可根据实际效果调整

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