Angular对话框弹窗：如何禁用背景锁定并允许操作后台页面？

MatDialog本身支持通过配置参数实现该需求，具体步骤如下：

• 调用MatDialog.open()时传入对应配置，移除背景遮罩或让背景不拦截点击事件：

  import { MatDialog } from '@angular/material/dialog';
  import { YourDialogComponent } from './path/to/your-dialog.component';
  
  // 在组件类中
  constructor(private dialog: MatDialog) {}
  
  openNonBlockingDialog() {
    this.dialog.open(YourDialogComponent, {
      hasBackdrop: false, // 直接移除背景遮罩，彻底取消锁定
      disableClose: false, // 可选：允许点击弹窗外部关闭弹窗
      panelClass: 'custom-non-blocking-dialog' // 自定义样式类调整弹窗位置与层级
    });
  }
  

• 若需要保留背景视觉效果但不锁定操作，可保留背景并通过CSS取消点击拦截：

  // 打开弹窗时保留背景
  this.dialog.open(YourDialogComponent, {
    hasBackdrop: true,
    panelClass: 'custom-non-blocking-dialog'
  });
  

  添加全局CSS：

  .mat-dialog-backdrop {
    pointer-events: none; /* 让背景不拦截鼠标点击 */
    opacity: 0.3; /* 可自定义背景透明度 */
  }
  
  .custom-non-blocking-dialog {
    z-index: 1000; /* 确保弹窗显示在页面元素上方，根据布局调整数值 */
    position: fixed;
    top: 30px;
    right: 30px; /* 自定义弹窗位置 */
  }
  

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