如何调整ng2-opd-popup弹窗位置并在弹窗显示时模糊主屏幕？

我来帮你搞定这两个需求，ng2-opd-popup确实默认没提供这两个配置，但用CSS和一点Angular逻辑就能轻松实现：

一、让弹窗固定在屏幕中央 #

这个核心用CSS强制覆盖组件的默认定位就行，步骤如下：

1. 打开浏览器开发者工具，找到弹窗对应的DOM元素，你会看到它的容器类名（通常是.opd-popup-container或者.opd-popup）。
2. 在你的组件CSS文件里，添加以下样式（用::ng-deep穿透Angular的样式隔离，或者如果组件用了ViewEncapsulation.None可以去掉::ng-deep）：

::ng-deep .opd-popup-container {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important; /* 清除默认margin，避免干扰居中 */
}

这段代码的原理是用fixed定位把弹窗钉在屏幕上，然后通过top:50%+left:50%让容器左上角居中，最后用transform: translate(-50%,-50%)把整个容器平移到真正的屏幕中央，兼容性很好。

二、打开弹窗时模糊主屏幕 #

这个需要自己加一个全屏遮罩层，配合弹窗的显示/隐藏状态来控制：

1. 在组件模板里添加遮罩层 #

<!-- 全屏遮罩层，默认隐藏 -->
<div class="popup-backdrop" *ngIf="isPopupOpen"></div>

<!-- 你的ng2-opd-popup组件 -->
<ng2-opd-popup #popup3 [options]="popupConfig"></ng2-opd-popup>

2. 在组件TS里控制遮罩的显示状态 #

import { Component, ViewChild } from '@angular/core';
import { Ng2PopupComponent } from 'ng2-opd-popup';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('popup3') popup3: Ng2PopupComponent;
  isPopupOpen = false;
  popupConfig = {
    // 这里放你的弹窗配置，比如标题、内容等
    // 记得加上关闭回调，用来隐藏遮罩
    onClose: () => {
      this.isPopupOpen = false;
    }
  };

  openPopup() {
    this.popup3.show();
    this.isPopupOpen = true;
  }
}

这里我利用了组件的onClose回调，当弹窗关闭时自动把遮罩隐藏，比手动监听更可靠。

3. 给遮罩层加模糊样式 #

在组件CSS里添加：

.popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色，增强模糊的层次感 */
  backdrop-filter: blur(6px); /* 核心：模糊背景内容 */
  z-index: 999; /* 遮罩要在主内容之上，弹窗之下 */
}

/* 确保弹窗在遮罩上方 */
::ng-deep .opd-popup-container {
  z-index: 1000 !important;
}

如果你的项目需要兼容旧浏览器（比如IE），backdrop-filter可能不生效，这时可以换成给body加filter: blur(6px)，但要注意弹窗本身不能被模糊，所以得把弹窗从body里提出来或者用其他层级控制，不过现在大部分现代浏览器都支持backdrop-filter了，这个方案更优雅。

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