html遮罩显示文字,JS简单实现点击按钮或文字显示遮罩层的方法
时间: 2024-01-10 18:04:18 浏览: 26
可以使用HTML和CSS来创建遮罩层,然后使用JavaScript来控制它的显示和隐藏。
HTML和CSS代码:
```html
<div class="overlay">
<div class="content">
<p>这里是遮罩层中的文字内容</p>
</div>
</div>
```
```css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
display: none; /* 默认隐藏 */
z-index: 9999; /* 确保在最上层 */
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 这里可以设置遮罩中心内容的样式 */
}
```
接下来使用JavaScript来控制遮罩层的显示和隐藏:
```javascript
var overlay = document.querySelector(".overlay");
var button = document.querySelector(".button");
var text = document.querySelector(".text");
button.addEventListener("click", function() {
overlay.style.display = "block";
text.innerHTML = "这里是遮罩层中的文字内容";
});
overlay.addEventListener("click", function() {
overlay.style.display = "none";
});
```
这样,当用户点击按钮时,遮罩层就会显示出来,并且显示相应的文字内容,当用户点击遮罩层时,它就会隐藏起来。