当使用 Bootstrap Modal 组件时，我们可能会遇到一个问题：当多个 modal 叠加打开时，只有最上层的 modal 能够正确的关闭，并且关闭时也会关闭下方的 modal，但是下方的 modal 的背景遮罩却不会自动关闭。本文将介绍如何解决这个问题。
问题分析
首先，让我们来看一下出现这个问题的原因。在使用 Bootstrap Modal 组件时，默认情况下每个 modal 都会添加一个遮罩层作为背景，这个遮罩层的 z-index 属性是比 modal 更高的。当多个 modal 叠加打开时，它们的遮罩层会重叠在一起，覆盖了整个页面。而当我们关闭最上层的 modal 时，它的遮罩层并没有被移除，导致下面的 modal 无法被点击或关闭。
解决方法
解决这个问题的核心思路是在每次打开 modal 时，都要动态计算当前页面已经打开的 modal 的数量，并将当前 modal 覆盖的遮罩层的 z-index 设置为适当的值，确保每个 modal 的遮罩层都能正确的显示和关闭。
具体实现方式如下：
- 在 HTML 中添加一个用于计数的变量，如
modalCount，并初始化为 0。
<body> <!-- 其他 HTML 代码 --> <script>let modalCount = 0;</script> </body>
- 在每次打开 modal 时，将
modalCount加 1，并设置当前 modal 的遮罩层的z-index为1050 + (modalCount * 10)，确保它比之前打开的所有 modal 的遮罩层都要高。
$('#myModal').on('show.bs.modal', function () {
modalCount++;
$(this).css('z-index', 1050 + (modalCount * 10));
});- 在每次关闭 modal 时，将
modalCount减 1，并移除当前 modal 的遮罩层。如果当前 modal 是最后一个被打开的 modal，则同时移除整个页面的遮罩层。
$('#myModal').on('hidden.bs.modal', function () {
modalCount--;
$(this).css('z-index', '');
if (modalCount === 0) {
$('.modal-backdrop').remove();
}
});示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ----- ---------------------------
----- ---------------- ---------------------------------------------------------------
------- ------------------------------------------------------------
------- ---------------------------------------------------------------------
-------
------
---- ------------------
------------- ----- ------------------------
---------- ------------- ---------- ------------ ------------------- ---------------------------- ------------------
---- ------------ ----- ------------ ------------- ------------- -------------------------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
------- ------------- ------------- -------------------- ------------------------ ------------------------------------------
--- ------------------- --------------------- ----------
------
-
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------