html遮罩显示文字,JS简单实现点击按钮或文字显示遮罩层的方法

可以使用HTML、CSS和JavaScript来实现遮罩显示文字的效果。

HTML代码：

<button id="show-overlay">显示遮罩层</button>
<div id="overlay">
  <div id="overlay-text">这里是遮罩层上的文字</div>
</div>

CSS代码：

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

#overlay-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-align: center;
}

JavaScript代码：

const showOverlayButton = document.getElementById("show-overlay");
const overlay = document.getElementById("overlay");

showOverlayButton.addEventListener("click", function() {
  overlay.style.display = "block";
});

overlay.addEventListener("click", function() {
  overlay.style.display = "none";
});

这段JavaScript代码实现了点击按钮显示遮罩层的效果，并且在遮罩层上点击可以隐藏遮罩层。