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