html遮罩显示文字,JS简单实现点击按钮或文字显示遮罩层的方法
时间: 2024-01-10 19:04:18 浏览: 29
可以使用HTML和CSS来创建遮罩层,使用JavaScript来控制其显示和隐藏。
首先,创建一个遮罩层的HTML结构,例如:
```html
<div class="overlay">
<div class="overlay-content">
<p>这里是遮罩层的内容</p>
<button id="close-overlay">关闭</button>
</div>
</div>
```
然后,在CSS中定义遮罩层的样式:
```css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
```
其中,`.overlay`表示遮罩层本身,`.overlay-content`表示遮罩层中的内容。
最后,在JavaScript中实现控制遮罩层的显示和隐藏:
```javascript
const overlay = document.querySelector('.overlay');
const closeButton = document.querySelector('#close-overlay');
function showOverlay() {
overlay.style.display = 'block';
}
function hideOverlay() {
overlay.style.display = 'none';
}
closeButton.addEventListener('click', hideOverlay);
```
其中,`showOverlay()`函数用于显示遮罩层,`hideOverlay()`函数用于隐藏遮罩层,`closeButton`为关闭按钮的DOM元素,点击它会触发`hideOverlay()`函数隐藏遮罩层。
你也可以在其他地方调用`showOverlay()`函数以显示遮罩层。