想弹出多个modal，如何加透明遮罩

为了在一个应用中弹出多个模态框，并在它们之间添加一个透明的遮罩层，你可以采用以下策略：

1. **创建遮罩组件**：
创建一个单独的CSS样式文件或HTML元素，定义一个透明度很高的半透明背景。这通常是一个简单的div元素，设置其display属性为`block`，position为`fixed`，并且覆盖整个屏幕，高度和宽度设置为100%。同时，将其opacity设为0.5或更低，以便看起来是透明的。

<div id="modal-mask" class="modal-mask"></div>

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 或者其他你喜欢的透明度 */
  display: none;
}

2. **管理遮罩状态**：
在JavaScript中，你需要有一个变量或数组来跟踪所有打开的模态框，同时维护遮罩的状态。每当一个新的模态框需要显示时，启用遮罩；当关闭最后一个模态框时，隐藏遮罩。

let modalCount = 0;

function toggleModalMask(open) {
  if (open) {
    document.getElementById('modal-mask').style.display = 'block';
    modalCount++;
  } else {
    if (!--modalCount || !document.getElementById('modal-mask')) return; // 如果只剩下一个模态框，且遮罩不存在，则直接移除
    document.getElementById('modal-mask').style.display = 'none';
  }
}

// 当需要显示模态框时，调用toggleModalMask(true)，反之则关闭

3. **模态框的叠加**：
为了让模态框有层级关系，每个模态框应包含自身关闭的逻辑，当它们关闭时，应该递归调用`toggleModalMask(false)`来允许后面的模态框显示。