Laravel中仅确认后关闭模态框时点击确认无响应如何解决

问题原因 #

你的代码存在两个核心问题导致确认后模态框无法关闭：

1. onclick="return confirm('Do you really want to quit?');"的写法会直接拦截事件的后续默认行为：哪怕用户点击确认返回true，return语句也会终止事件继续执行，Bootstrap模态框绑定的关闭逻辑根本不会被触发。
2. data-backdrop="static"是模态框根元素的属性，作用是控制点击模态框外部区域时是否关闭模态框，加在关闭按钮上没有任何作用。

修复方案 #

方案1：原生属性写法（适配Bootstrap 4及更早版本） #

只需要修改onclick逻辑，仅在用户点击取消时阻止默认行为，确认时正常执行关闭逻辑即可：

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" onclick="if(!confirm('Do you really want to quit?')) return false;" data-dismiss="modal">Close</button>
  <button type="submit">Add</button>
</div>

如果是Bootstrap 5版本，把data-dismiss="modal"替换为data-bs-dismiss="modal"即可。

方案2：独立事件写法（适配所有版本，更易维护） #

给关闭按钮和模态框加对应ID，单独写点击事件控制关闭：

<!-- 模态框根元素加id -->
<div class="modal" id="your-modal-id">
  <!-- 其他模态框结构 -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" id="close-modal-btn">Close</button>
    <button type="submit">Add</button>
  </div>
</div>

<script>
$('#close-modal-btn').click(function() {
  if(confirm('Do you really want to quit?')) {
    $('#your-modal-id').modal('hide');
  }
})
</script>

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