html遮罩显示文字,JS简单实现点击按钮或文字显示遮罩层的方法
时间: 2024-01-05 22:04:10 浏览: 57
可以使用HTML和CSS来创建遮罩层,然后使用JavaScript来控制它的显示和隐藏。
HTML和CSS代码:
```html
<div class="overlay">
<div class="content">
<!-- 这里放置需要遮罩的内容 -->
</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");
button.addEventListener("click", function() {
overlay.style.display = "block";
});
overlay.addEventListener("click", function() {
overlay.style.display = "none";
});
```
这样,当用户点击按钮时,遮罩层就会显示出来,当用户点击遮罩层时,它就会隐藏起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)