在前端开发中，Bootstrap 模态框 (modal) 经常被用来实现各种交互功能，如登录、注册、提示等。但是在页面中使用多个模态框时，可能会出现一个滚动条遮罩阴影问题，即当多个模态框叠加在一起时，滚动条的阴影效果可能被遮挡住了，导致用户无法使用滚动条进行滚动操作。
问题分析
该问题的根本原因是由于 Bootstrap 模态框在显示时会调用 body 元素的 overflow:hidden 样式来禁止页面滚动，同时使用一个 .modal-backdrop 遮罩层覆盖在整个页面上，这样可以保证模态框显示时不受外部干扰。然而，当同时存在多个模态框时，它们的遮罩层就会相互叠加，从而导致后面的模态框遮挡了前面的遮罩层，使得前面的滚动条阴影被遮挡住。
解决方案
为了解决这个问题，我们需要对遮罩层进行一些修改，使得它能够正确地处理多个模态框重叠的情况。具体来说，我们需要将多个遮罩层的 z-index 属性设置为不同的值，这样就可以保证后面的遮罩层会覆盖前面的遮罩层。
方法一：手动指定 z-index 值
我们可以手动指定每个模态框对应的遮罩层的 z-index 值，如下所示：
-- -------------------- ---- ------- -- ------ -- --------------- - -------- ----- - -- ------ -- --------------- - --------------- - -------- ----- - -- ------ -- --------------- - --------------- - --------------- - -------- ----- -
在这个例子中，我们将第一个模态框的遮罩层的 z-index 设置为 1040，第二个模态框的遮罩层的 z-index 设置为 1050，第三个模态框的遮罩层的 z-index 设置为 1060，以此类推。这样就可以确保后面的模态框遮罩层会覆盖前面的遮罩层。
方法二：自动计算 z-index 值
如果你需要处理大量的模态框，手动指定每个遮罩层的 z-index 值可能会比较麻烦。为了简化这个过程，我们可以使用 JavaScript 自动计算每个模态框对应的遮罩层的 z-index 值。
下面是一个示例代码：
-- -------------------- ---- -------
-- -- ------- -
-------- ----------------- -
--- ------ - -----
--------------------------- -
--- ------------- - --------------------------------
-- --------------------- - -- -
------ -- ---
---------------------------- --------
-
---
-
-- --------
---------------------------------- -------- -- -
------------------
---
-- --------
----------------------------------- -------- -- -
------------------
---在这个例子中，我们首先定义了一个 calculateZIndex 函数来计算每个模态框对应的遮罩层的 z-index 值
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1721