bootstrap5-模态框关闭问题

环境：win10 + bootstrap5 + .NET

模态框入门参考：
bootstrap5-学习笔记2-模态框+弹窗+tooltip+popover+信息提示框_bootstrap5 popover-CSDN博客
https://blog.csdn.net/pxy7896/article/details/139352285

问题描述

假设我有一个模态框A，上面有几个table，table中的数据是查询数据库后注入的。每条数据的第一列是操作按钮。点击某个操作按钮，系统执行一些操作并且关闭模态框。本来采用的是下面的方法：

 // 关闭模态框$("#AModal").modal("hide");$('#AModal').modal('hide').on('hidden.bs.modal', function (e) {$('.modal-backdrop').remove();});

但是执行完这段代码，当前页面被一层黑色笼罩，也不能继续操作了。

解决方案

修改上述table中的按钮，增加：

data-bs-dismiss="modal"

完整的模态框是：

<div class="modal fade" id="AModal" tabindex="-1" aria-labelledby="AModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">xxxx</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body"><table><thead>...</thead><tbody><tr><td ... data-bs-dismiss="modal">...</td></tr></tbody></table></div><!-- 模态框底部 --><div class="modal-footer align-content-end"><button type="button" class="btn custom-clear-btn me-3" data-bs-dismiss="modal" onclick="xxx()">取消</button><button type="button" class="btn custom-btn" onclick="xxxx()" data-bs-dismiss="modal">提交</button></div></div></div>
</div>