Bootstrap 4模态框关闭按钮无法关闭，Laravel项目中如何修复？

修复方案 #

按以下优先级排查调整即可解决：

1. 调整模态框DOM位置 #

你当前代码中模态框被嵌套在<form>标签内部（模态框闭合标签在</form>之前），Bootstrap 4要求模态框最好作为<body>的直接子元素，父级表单的事件拦截、层级约束都会导致data-dismiss属性失效。
修复操作：将整个模态框代码块移动到</form>闭合标签外部，放在页面</body>标签之前的位置即可。

2. 校验JS引入规则 #

Bootstrap 4模态框依赖jQuery，必须严格遵循引入顺序：

• 先引入jQuery库
• 再引入Bootstrap JS文件
  同时避免重复引入多版本jQuery、同时引入bootstrap.js和bootstrap.min.js，重复引入会导致组件事件绑定冲突，触发关闭失效。

3. 正确编写手动关闭代码 #

如果需要手动绑定关闭事件，需要针对模态框实例触发hide方法，示例如下：
首先给关闭按钮添加id属性：

<button type="button" id="confirmCloseBtn" class="btn btn-secondary" data-dismiss="modal">Close</button>

再添加JS逻辑，注意要放在jQuery和Bootstrap JS引入之后，或者包裹在DOM加载完成的回调中：

$(document).ready(function(){
  $('#confirmCloseBtn').on('click', function(){
    $('#confirmOrder').modal('hide');
  });
});

4. 额外排查项 #

• 检查自定义样式.modal-content-height是否设置了pointer-events: none属性，该属性会拦截所有点击事件，删除该属性即可恢复按钮响应
• 排查是否有全局自定义JS绑定了e.stopPropagation()到按钮元素，阻止了Bootstrap自带事件的触发

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