css弹出框 之前的页面变灰

在网页设计中，弹出框是一种常见的交互方式，可以使页面功能更加丰富、用户体验更加友好。而其中一种特殊的弹出框效果，就是弹出框出现时，页面背景会变灰，从而弹出框更加凸显。那么如何实现这样的效果呢？下面介绍一种使用 CSS 实现弹出框背景变灰的方法。

.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-inner{
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.button{
  background-color: #3F51B5;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

以上代码中，.modal 用于设置弹出框外部遮罩层的样式。其中，使用了 fixed 定位，使其始终在页面上方且不随滚动条而移动。同时，设置了 background-color 为半透明黑色，使页面背景变暗。接下来的 display: flex 和 justify-content: center、align-items: center，用于让弹出框居中显示。

而 .modal-inner 用于设置弹出框内部的样式，包括背景颜色、内边距、边框圆角等。最后的 .button则是一个示例按钮的样式。

在使用时，只需要在页面中添加一个具有 .modal 类的 div 元素，再在其中添加弹出框内部的内容，即可实现弹出框出现时页面变灰的效果，同时也可以自定义弹出框的内容和样式。