页面重载后Bootstrap Modal仅显示遮罩无法弹出的问题

问题核心分析 #

出现仅显示遮罩的情况，通常是Modal结构不符合Bootstrap规范、JavaScript执行时机过早，或是Livewire组件异步加载延迟导致内容未渲染完成。以下是针对性的解决方案：

解决方案1：修复Modal HTML结构错误 #

你的Modal代码中，modal-dialog的role属性被错误设置为"file"，不符合Bootstrap的要求，正确值应为"document"。这个错误会导致Bootstrap无法正确识别Modal容器，进而只显示遮罩。

修改Modal的对应代码：

<!-- 原错误代码 -->
<div class="modal-dialog custom-modal" role="file">

<!-- 修改后代码 -->
<div class="modal-dialog custom-modal" role="document">

解决方案2：调整JavaScript执行时机 #

确保触发Modal的脚本在jQuery和Bootstrap JS完全加载完成后执行，同时适配Livewire组件的异步加载特性：

方案A：监听Livewire初始化事件 #

由于Modal内包含Livewire组件，可等待Livewire初始化完成后再触发Modal：

@if(session('showModal'))
    <script>
        document.addEventListener('livewire:initialized', function () {
            $('#question_{{ $quiz->id }}').modal('show');
        });
    </script>
@endif

方案B：添加延迟执行 #

如果Livewire加载较慢，可给脚本添加小延迟，确保内容渲染完成：

@if(session('showModal'))
    <script>
        $(document).ready(function () {
            setTimeout(() => {
                $('#question_{{ $quiz->id }}').modal('show');
            }, 300);
        });
    </script>
@endif

方案C：确保脚本加载顺序 #

将触发脚本放在页面底部，或通过Laravel的@push推送到脚本栈（需确保布局文件包含@stack('scripts')）：

@push('scripts')
@if(session('showModal'))
    <script>
        $(document).ready(function () {
            $('#question_{{ $quiz->id }}').modal('show');
        });
    </script>
@endif
@endpush

解决方案3：验证Session与选择器正确性 #

1. 确认Session值传递正常：在视图中临时添加调试代码，检查session('showModal')是否为true：

{{ dd(session('showModal'), $quiz->id) }}

2. 检查生成的选择器：查看页面源码，确认脚本中的选择器是否正确生成（例如#question_1，其中1是对应quiz的ID）。

解决方案4：确保自定义关闭函数正常工作 #

检查customCloseAddQuestionsModal函数是否正确调用Modal的hide方法，避免因关闭逻辑错误导致Modal状态异常：

<script>
function customCloseAddQuestionsModal(quizId) {
    $('#question_' + quizId).modal('hide');
}
</script>

内容的提问来源于stack exchange，提问作者Marvin Pua Lucas