css带蒙版的弹出框样式

在前端开发中，弹出框是非常常用的组件。而通过 CSS 带蒙版的弹出框样式，可以让弹出框更具有美感，让用户的使用体验更佳。下面是一份样式代码，来实现这样的效果：

/* 弹出框 */
.popup {
  position: fixed; /* 固定位置 */
  top: 50%; /* 垂直偏移 */
  left: 50%; /* 水平偏移 */
  transform: translate(-50%,-50%); /* 使用 transform 属性进行居中 */
  z-index: 999; /* 使弹出框浮在页面最上层 */
  background-color: #fff; /* 背景色 */
  border-radius: 4px; /* 圆角 */
  Box-shadow: 0 1px 10px rgba(0,0.2); /* 阴影 */
  padding: 20px; /* 内边距 */
}

/* 蒙版 */
.mask {
  position: fixed; /* 固定位置 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998; /* 比弹出框的层级低 */
  background-color: rgba(0,0.5); /* 半透明的黑色 */
}

以上代码中，我们使用了 position: fixed 将弹出框和蒙版固定在页面上。同时，弹出框使用了 transform: translate(-50%,-50%) 的方式进行垂直和水平方向上的居中。而且，我们为弹出框设置了圆角和阴影，使其更具有美感。

最后，我们需要在 JavaScript 代码中，通过控制弹出框和蒙版的显示和隐藏，来实现弹出框的效果。例如：

// 弹出框显示
document.querySelector('.popup').style.display = 'block';
document.querySelector('.mask').style.display = 'block';

// 弹出框隐藏
document.querySelector('.popup').style.display = 'none';
document.querySelector('.mask').style.display = 'none';

最终，我们就可以得到一个美观、实用的 CSS 带蒙版的弹出框样式了。