bootstrap5-模态框关闭问题

news2024/11/6 16:54:59

环境：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>