Laravel Blade文件中Bootstrap Modal模态框无法加载弹出问题求助

问题排查及修复方案 #

• 核心依赖引入错误/顺序错误
  Bootstrap 4的模态框依赖jQuery、Popper.js、Bootstrap.js三个JS文件，引入顺序必须严格遵循：jQuery → Popper.js → Bootstrap.js，缺一个或者顺序错都会导致模态框功能失效。
  如果使用的是Bootstrap 5版本，属性名规则已经更新，需要把触发元素的data-toggle="modal"改为data-bs-toggle="modal"，关闭按钮的data-dismiss="modal"改为data-bs-dismiss="modal"，否则功能不生效。
• 触发标签的默认行为干扰
  用<a>标签做模态框触发元素时，未加载成功的Bootstrap JS无法阻止其默认跳转行为，就会出现点击直接跳转href对应锚点的情况，可以给a标签补充role="button"属性，或者直接换成<button>标签做触发元素，彻底避免跳转问题。
• 代码里的无效/错误属性修复
  1. 模态框.modal-dialog元素上的style="width:px;"是无效属性，直接删除即可，避免样式异常导致模态框渲染后不可见。
  2. 模态框里的取消按钮type属性写错了，当前是submit，点击会直接提交表单，改为type="button"即可。
• JS冲突排查
  打开浏览器F12控制台，查看有没有红色报错：如果报$ is not defined就是jQuery未正确引入；如果报$(...).modal is not a function就是Bootstrap JS未正确引入，或者存在多版本jQuery冲突的情况。

修正后的核心代码示例 #

<!-- 触发元素（Bootstrap4版本） -->
<button class="dropdown-item" data-toggle="modal" data-target="#resetPassword">
    <i class="fas fa-key mr-1"></i> Modal Test
</button>

<!-- Bootstrap Modal -->
<div class="modal fade" id="resetPassword" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">{{ __('trans.changepassword') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-3">
                    <form method="" action="" enctype="multipart/form-data">
                        <div class="form-group row">
                            <div class="col-md-4 col-form-label">
                                <label for="current_password">{{ __('trans.currentpassword') }}</label>
                            </div>
                            <div class="col-md-8">
                                <input id="current_password" type="password" class="form-control @error('current_password') is-invalid @enderror" name="current_password" required autocomplete="new-password">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('trans.cancel') }}</button>
                            <button type="submit" class="btn btn-success">{{ __('trans.changepassword') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

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