如何使用HTML、CSS和JavaScript实现遮罩的右上角关闭按钮？

元素作为遮罩的容器，并设置其样式为position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);

<div id="mask"></div>

接下来，我们需要添加一个关闭按钮。可以使用一个元素作为关闭按钮，并设置其样式为position: absolute; top: 10px; right: 10px; cursor: pointer;

<div id="mask">
    <span id="close-btn">×</span>
</div>

然后，我们可以使用JavaScript来实现关闭按钮的功能。首先，我们需要获取遮罩和关闭按钮的元素节点，可以使用document.getElementById()方法来获取。

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

接下来，我们可以为关闭按钮添加一个点击事件监听器，当点击关闭按钮时，将遮罩隐藏起来。

closeBtn.addEventListener('click', function() {
    mask.style.display = 'none';
});

最后，我们需要将遮罩添加到页面中，并显示出来。

document.body.appendChild(mask);
mask.style.display = 'block';

现在，当用户点击关闭按钮时，遮罩将会被隐藏起来，用户可以继续操作页面。

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

• 上一篇： 如何使用HTML、CSS和JavaScript实现遮罩的纵向拉伸效果？
• 下一篇： 如何使用HTML、CSS和JavaScript实现带有遮罩的视频播放器？