技术求助：打开对话框（Dialog Box）时如何实现背景模糊效果？

我想在项目中实现图中这类对话框，求技术实现方案？

原生HTML/CSS/JS手写实现 #

• 结构搭建：用基础HTML标签构建对话框核心结构，包含遮罩层、标题栏、内容区和操作按钮：

<!-- 遮罩层 -->
<div class="dialog-mask"></div>
<!-- 对话框主体 -->
<div class="dialog">
  <div class="dialog-title">
    <span>提示</span>
    <button class="dialog-close">&times;</button>
  </div>
  <div class="dialog-body">
    <p>这里放置对话框的具体内容</p>
  </div>
  <div class="dialog-footer">
    <button class="btn-cancel">取消</button>
    <button class="btn-confirm">确定</button>
  </div>
</div>

• 样式美化：通过CSS固定定位实现居中效果，添加阴影、圆角等视觉样式：

/* 遮罩层样式 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}
/* 对话框主体样式 */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 8px;
  width: 420px;
  z-index: 1000;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  display: none;
}
/* 标题栏样式 */
.dialog-title {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}
.dialog-close {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}
/* 内容区样式 */
.dialog-body {
  padding: 24px 20px;
  font-size: 14px;
  color: #333;
}
/* 底部按钮区样式 */
.dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn-cancel, .btn-confirm {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  cursor: pointer;
  font-size: 14px;
}
.btn-confirm {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

• 交互逻辑：用JavaScript控制对话框的显示和隐藏：

const mask = document.querySelector('.dialog-mask');
const dialog = document.querySelector('.dialog');
const closeBtn = document.querySelector('.dialog-close');
const cancelBtn = document.querySelector('.btn-cancel');

// 显示对话框
function openDialog() {
  mask.style.display = 'block';
  dialog.style.display = 'block';
}

// 隐藏对话框
function closeDialog() {
  mask.style.display = 'none';
  dialog.style.display = 'none';
}

// 绑定关闭事件
closeBtn.addEventListener('click', closeDialog);
cancelBtn.addEventListener('click', closeDialog);

// 调用openDialog()即可触发显示

借助UI框架快速实现 #

如果项目已经引入了前端UI框架，可以直接使用现成的对话框组件，节省开发时间：

• Vue项目：Element UI的ElDialog、Ant Design Vue的a-modal
• React项目：Ant Design的Modal、Material UI的Dialog
• 原生项目：Bootstrap的Modal组件

这些组件都支持自定义标题、内容、按钮样式，还自带动画效果和交互逻辑，只需简单配置参数就能实现需求。

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