如何使用HTML、CSS和JavaScript实现全屏遮罩效果？

在本教程中，我们将学习如何使用HTML、CSS和JavaScript实现全屏遮罩效果。全屏遮罩是一种常用的网页设计效果，可以用于弹出窗口、提示信息、登录框等等。

HTML结构

<div class="overlay" id="overlay"></div>
<div class="popup" id="popup">
    <div class="content">
        <h3>这是一个弹出窗口</h3>
        <p>这是弹出窗口的内容</p>
        <button id="close-btn">关闭</button>
    </div>
</div>

首先，我们需要在HTML中添加两个元素，一个是遮罩层（overlay），用于覆盖整个页面，另一个是弹出窗口（popup），用于显示内容。

CSS样式

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

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.popup .content {
    text-align: center;
}

.popup h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.popup p {
    font-size: 16px;
    margin-bottom: 20px;
}

.popup button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
}

然后，我们需要为遮罩层和弹出窗口添加样式。遮罩层需要设置为固定定位，覆盖整个页面，并设置半透明的背景颜色。弹出窗口需要设置为固定定位，位于页面的中心，并设置合适的样式，如背景颜色、内边距、边框和阴影等。

JavaScript实现

var overlay = document.getElementById('overlay');
var popup = document.getElementById('popup');
var closeBtn = document.getElementById('close-btn');

function openPopup() {
    overlay.style.display = 'block';
    popup.style.display = 'block';
}

function closePopup() {
    overlay.style.display = 'none';
    popup.style.display = 'none';
}

closeBtn.addEventListener('click', closePopup);

最后，我们需要使用JavaScript来实现打开和关闭弹出窗口的功能。我们可以使用事件监听器来监听关闭按钮的点击事件，当点击关闭按钮时，调用关闭弹出窗口的函数，隐藏遮罩层和弹出窗口。

现在，当你点击打开按钮时，就会显示遮罩层和弹出窗口，点击关闭按钮时，就会隐藏它们。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用HTML、CSS和JavaScript实现带有加载动画的遮罩？
• 下一篇： 如何使用HTML、CSS和JavaScript实现带有关闭按钮的遮罩？