Laravel应用中Bootstrap Modal点击button无法开关问题咨询

• Bootstrap属性版本不匹配：你当前代码混用了Bootstrap不同版本的模态框控制属性：打开模态框用的是Bootstrap 4版本的data-toggle、data-target、data-dismiss属性，关闭按钮用的是Bootstrap 5专属的带bs前缀的data-bs-dismiss属性，属性不匹配会导致Bootstrap模态框事件无法被正常触发。
• 表单默认提交行为冲突：你的模态框代码嵌套在<form>标签内部，<button>标签如果不显式声明type="button"，浏览器会默认将其识别为type="submit"，点击时优先触发表单提交逻辑，因此会弹出「以下数据将被提交到服务器」的提示，表单提交的默认行为会阻断Bootstrap模态框的关闭事件执行。而<a>标签本身不具备表单提交的默认属性，因此替换后功能可以正常运行。

1. 统一Bootstrap属性版本，按照你项目实际使用的Bootstrap版本调整所有相关属性：
   • 若使用Bootstrap 4：将关闭按钮的data-bs-dismiss="modal"修改为data-dismiss="modal"
   • 若使用Bootstrap 5：将打开按钮的data-toggle="modal"、data-target=".bs-example-modal-lg"，以及模态框头部关闭叉号的data-dismiss="modal"，全部替换为带bs前缀的data-bs-toggle="modal"、data-bs-target=".bs-example-modal-lg"、data-bs-dismiss="modal"
2. 避免表单默认提交冲突：
   如果模态框嵌套在表单内部，所有控制模态框的<button>标签必须显式指定type="button"，覆盖浏览器默认的submit行为，修复后的关闭按钮代码示例：

<button type="button" class="btn btn-danger btn-rounded text-left" data-bs-dismiss="modal">Close</button>

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