在Angular中实现多个可拖拽modals或pop ups弹窗的方法

首先纠正一个认知误区：Angular Material并非完全不支持同时开启多个弹窗，只是默认的全局遮罩、焦点锁定规则会导致后开的弹窗拦截前面所有弹窗的操作，同时默认同层级z-index会出现遮挡，调整配置后即可实现需求，也可以选择其他更适配的方案：

方案1：改造Angular Material Dialog实现 #

• 第一步：调整弹窗配置，关闭全局遮罩和默认焦点规则，示例代码：

import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

// 调用弹窗时的配置
const config: MatDialogConfig = {
  hasBackdrop: false, // 关闭全局遮罩，避免遮罩挡住下层弹窗
  autoFocus: false,
  restoreFocus: false,
  panelClass: `draggable-dialog-${Date.now()}` // 给每个弹窗加唯一标识类
};
this.dialog.open(YourDialogComponent, config);

• 第二步：集成Angular CDK拖拽能力，先在对应模块导入DragDropModule，再在弹窗组件的根容器添加cdkDrag指令，可单独指定拖拽手柄：

<!-- 弹窗组件模板 -->
<div class="dialog-header" cdkDragHandle>弹窗标题</div>
<div cdkDrag cdkDragRootElement=".draggable-dialog-{{dialogId}}">
  弹窗内容
</div>

• 第三步：动态控制z-index，监听弹窗的点击事件，给当前点击的弹窗设置最高z-index，保证操作时置顶即可。

方案2：使用原生支持多弹窗的第三方组件 #

如果不想改造原生Material组件，可以直接用适配多弹窗场景的UI库：

• PrimeNG Dialog：原生支持多实例同时开启，只需要配置[draggable]="true" [modal]="false"即可，自带点击置顶、拖拽逻辑，无需额外改造。
• NG Bootstrap Modal：支持多实例共存，搭配CDK Drag指令即可快速实现拖拽效果。

方案3：自定义轻量弹窗组件 #

如果完全不想依赖第三方UI库的弹窗逻辑，可以自行封装：

• 使用Angular的ViewContainerRef动态创建弹窗组件，挂载到全局的overlay容器上
• 每个弹窗实例单独维护位置、z-index状态
• 绑定CDK Drag指令实现拖拽，监听点击事件动态调整z-index保证当前操作弹窗置顶即可。

内容的提问来源于stack exchange，提问作者Maulik Dikshit