html 弹框后面的页面置灰

要实现弹框后面的页面置灰，可以通过以下步骤实现：

1. 在弹框弹出时，添加一个遮罩层，将整个页面遮挡住。
2. 设置遮罩层的背景色为半透明的黑色，这样可以让页面看起来灰暗。
3. 将遮罩层的 z-index 属性设置为比弹框的 z-index 属性小，这样可以让弹框浮在遮罩层上面。
4. 当弹框关闭时，移除遮罩层。

以下是一个示例代码：

HTML 代码：

<div class="overlay"></div>
<div class="popup">
  <h2>弹框标题</h2>
  <p>弹框内容</p>
  <button class="close">关闭</button>
</div>

CSS 代码：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
  z-index: 10; /* 比弹框的 z-index 属性小 */
  display: none; /* 初始状态下不显示 */
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  z-index: 20;
}

.popup h2 {
  margin-top: 0;
}

.popup p {
  margin-bottom: 20px;
}

.popup .close {
  display: block;
  margin: 0 auto;
}

JavaScript 代码：

var overlay = document.querySelector('.overlay');
var popup = document.querySelector('.popup');
var closeBtn = document.querySelector('.popup .close');

function openPopup() {
  overlay.style.display = 'block';
  popup.style.display = 'block';
}

function closePopup() {
  overlay.style.display = 'none';
  popup.style.display = 'none';
}

openPopup(); // 打开弹框

closeBtn.addEventListener('click', closePopup); // 关闭弹框

在这个示例中，当打开弹框时，会将遮罩层和弹框都显示出来，并且遮罩层会将整个页面遮挡住，让页面看起来灰暗。当关闭弹框时，遮罩层和弹框都会被隐藏。