多个ElMessageBox层级问题

在使用 Element Plus 的 ElMessageBox（即 ElMessage和 ElMessageBox相关的弹窗组件）时，如果你遇到 多个 ElMessageBox 弹出后出现层级（z-index）问题，比如后弹出的弹窗被前面的遮挡，或者层级错乱，这通常是由于 z-index 设置不当或弹窗堆叠顺序管理问题导致的。

下面我们来详细分析可能的原因及解决方案：

---

一、问题现象

当连续调用多个 ElMessageBox.confirm()或 ElMessageBox.alert()/ ElMessageBox.prompt()时，可能会出现以下情况：

1.后弹出的 MessageBox 被先弹出的遮挡（看起来像是层级低）；

2.关闭一个 MessageBox 后，另一个的层级显示不正常；

3.多个 MessageBox 打开时视觉上混乱，没有正常的堆叠顺序。

在使用 Element Plus 的 ElMessageBox（即 ElMessage和 ElMessageBox相关的弹窗组件）时，如果你遇到 多个 ElMessageBox 弹出后出现层级（z-index）问题，比如后弹出的弹窗被前面的遮挡，或者层级错乱，这通常是由于 z-index 设置不当或弹窗堆叠顺序管理问题导致的。

---

二、原因分析

Element Plus 的 ElMessageBox是基于 Vue 组件动态创建的，每次调用如 ElMessageBox.confirm()都会动态生成一个 Modal 组件，并插入到 DOM 中。

默认情况下，Element Plus 为这些弹窗（Modal 背景和 MessageBox 本身）设置了 z-index，但这个值通常是 固定的或者按一定规则递增。如果：

•没有正确管理 z-index的递增逻辑；

•多个 MessageBox 同时存在且未合理堆叠；

•自定义了样式，覆盖了默认的 z-index；

就可能导致视觉上的层级问题。

在使用 Element Plus 的 ElMessageBox（即 ElMessage和 ElMessageBox相关的弹窗组件）时，如果你遇到 多个 ElMessageBox 弹出后出现层级（z-index）问题，比如后弹出的弹窗被前面的遮挡，或者层级错乱，这通常是由于 z-index 设置不当或弹窗堆叠顺序管理问题导致的。

---

三、解决方案

方案 1：确保使用方式正确，避免密集弹出

Element Plus 的 ElMessageBox本身在设计上是 模态（modal）的，即 一次只应该处理一个用户交互。最佳实践是：

✅ 避免同时弹出多个 MessageBox，应等待用户响应当前弹窗之后，再决定是否弹出下一个。

async function handleAction() {const confirm1 = await ElMessageBox.confirm('操作1，是否继续？', '提示');if (confirm1 === 'confirm') {const confirm2 = await ElMessageBox.confirm('操作2，是否继续？', '提示');if (confirm2 === 'confirm') {// 执行操作}}
}

方案 2：检查是否自定义了 z-index

如果你在全局或局部 自定义了 .el-message-box或 .el-overlay的样式，尤其是修改了 z-index，可能会导致弹窗层级错乱。

.el-message-box {z-index: 1000 !important; /* 可能覆盖了默认递增逻辑 */
}.el-overlay {z-index: 2000 !important;
}

方案 3：Element Plus 内部对 z-index 的管理

Element Plus 的 ElMessageBox和 ElDialog等组件，其 z-index是通过 overlay的 z-index 基础值 + 堆叠计数等机制来管理的。默认情况下：

•ElOverlay（遮罩层）的 z-index通常是 2000起步；

•ElMessageBox的内容部分一般会再高一些，比如 2001或更高；

•如果你连续打开多个 MessageBox，它们应该会按顺序获得更高的 z-index，新弹出的应该在最上面。

但如果你的项目中有 多个地方手动控制 z-index，或者使用了多个 UI 库，有可能导致冲突。

方案 4：手动控制 z-index（高级，不推荐轻易尝试）

如果你确实需要 同时显示多个 MessageBox（不推荐），并且希望控制它们的层级，可以：

1.通过 Vue 的 teleport或手动挂载点控制渲染顺序；

2.手动为每个 MessageBox 设置递增的 z-index（需要修改源码或封装组件）；

3.使用 append-to-body属性（默认已经是 true），确保它们都插入到 body下，避免父容器 z-index 影响。

但这种方式复杂且易出错，官方并不推荐同时显示多个 MessageBox。