Angular中如何为函数内的alert、confirm弹窗设置自定义CSS样式？

浏览器原生的alert()、confirm()是浏览器/操作系统层面渲染的内置UI控件，根本不在当前页面的DOM树里，没有任何CSS选择器能选中这类弹窗元素，完全不支持自定义样式，不存在直接给原生弹窗加CSS的实现方法。
所有能自定义样式的弹窗，本质都是用DOM元素模拟的模态框，你只需要把原有业务代码里的原生弹窗调用替换成自定义模态框的调用即可，不需要大幅改动原有业务逻辑。

下面给你两种适配当前Angular项目的实现方式，可按需选择：

方案1：无依赖轻量自实现 #

自己封装两个和原生API逻辑对齐的全局方法，样式完全自主控制：

1. 先在全局样式文件（一般是src/styles.css）里写自定义弹窗的CSS，可按需调整样式规则：

.custom-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.custom-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  min-width: 340px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.custom-modal-content {
  font-size: 15px;
  color: #1f1f1f;
  line-height: 1.5;
  margin-bottom: 24px;
}
.custom-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.custom-modal-btn {
  padding: 7px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.custom-modal-btn.primary {
  background: #1677ff;
  color: #fff;
}
.custom-modal-btn.default {
  background: #f0f0f0;
  color: #333;
}

2. 在全局工具文件里封装两个弹窗方法，因为DOM渲染是异步的，方法返回Promise，调用时加async/await就能保持和原生弹窗接近的同步写法：

// 自定义alert，替换原生window.alert
export function customAlert(message: string): Promise<void> {
  return new Promise((resolve) => {
    const mask = document.createElement('div');
    mask.className = 'custom-modal-mask';
    mask.innerHTML = `
      <div class="custom-modal">
        <div class="custom-modal-content">${message}</div>
        <div class="custom-modal-actions">
          <button class="custom-modal-btn primary">确定</button>
        </div>
      </div>
    `;
    document.body.appendChild(mask);
    mask.querySelector('.primary')!.addEventListener('click', () => {
      mask.remove();
      resolve();
    });
  });
}

// 自定义confirm，替换原生window.confirm
export function customConfirm(message: string): Promise<boolean> {
  return new Promise((resolve) => {
    const mask = document.createElement('div');
    mask.className = 'custom-modal-mask';
    mask.innerHTML = `
      <div class="custom-modal">
        <div class="custom-modal-content">${message}</div>
        <div class="custom-modal-actions">
          <button class="custom-modal-btn default">取消</button>
          <button class="custom-modal-btn primary">确定</button>
        </div>
      </div>
    `;
    document.body.appendChild(mask);
    mask.querySelector('.default')!.addEventListener('click', () => {
      mask.remove();
      resolve(false);
    });
    mask.querySelector('.primary')!.addEventListener('click', () => {
      mask.remove();
      resolve(true);
    });
  });
}

3. 替换原有业务代码里的原生弹窗调用，改动量极小：

• 替换updateUser里的alert：

async updateUser() {
  this.usersService.UpdateUser(this.user.id, this.user)
  .subscribe(async () => {
      // 替换原生alert
      await customAlert("Password changed! You are taken to the login page")
      this.router.navigate(['login']);
    },(e)=> {
      this.errors = [];
      if (e.error.errors.Password) {
        this.errors.push(e.error.errors.Password);
      } 
    }
  )
}

• 替换deleteUser里的confirm：

async deleteUser(id:string,user:User){
  // 替换原生confirm
  const isConfirm = await customConfirm(`Are you sure you want to delete user ${user.userName}`)
  if(isConfirm){
    this.usersService.DeleteUser(id)
    .subscribe(
      () =>{
        this.router.navigate(['login']);
      }
    )
  }
}

方案2：使用Angular生态现成UI组件 #

如果项目已经引入了NG-ZORRO、Angular Material这类UI库，直接用库自带的Modal/Dialog组件即可，这类组件本身就支持完全自定义样式、动画、交互逻辑，只需要按照组件文档替换原有原生弹窗调用就行，不用自己写DOM封装。

不要尝试用JS劫持原生方法、修改浏览器配置这类偏门方式实现自定义原生弹窗样式，这类方案兼容性极差，还会阻塞主线程导致页面交互异常，用DOM模拟模态框是目前全行业通用的唯一可行方案。

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