JavaScript 创建页面遮罩层 - 代码示例

以下是使用 JavaScript 创建页面遮罩层的示例代码：

HTML 代码：

<button onclick='showOverlay()'>显示遮罩层</button>

<div id='overlay' style='display:none;'></div>

CSS 代码：

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

JavaScript 代码：

function showOverlay() {
  var overlay = document.getElementById('overlay');
  overlay.style.display = 'block';
}

function hideOverlay() {
  var overlay = document.getElementById('overlay');
  overlay.style.display = 'none';
}

在上述代码中，当点击'显示遮罩层'按钮时，调用 showOverlay() 函数来显示遮罩层。遮罩层的 display 属性被设置为'block'，使其可见。当需要隐藏遮罩层时，调用 hideOverlay() 函数来隐藏遮罩层。遮罩层的 display 属性被设置为'none'，使其不可见。