点击按钮生成页面蒙层遮罩的简易方法
本文介绍一种简单方法，在点击按钮后为页面底部图标添加阴影蒙层效果。
我们需要用到HTML和JavaScript代码来实现这个功能。 以下代码创建一个黑色半透明的遮罩层，覆盖页面，从而为底部的图标提供阴影效果：
<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1001;"></div>
这段HTML代码创建了一个名为overlay的div元素，它将作为我们的蒙层。 rgba(0, 0, 0, 0.7)设置了黑色半透明的背景颜色（0.7代表70%透明度）。position: fixed确保它始终覆盖整个页面，z-index: 1001 确保它位于其他元素之上。
然后，我们需要JavaScript代码来控制蒙层的显示和隐藏：
function showOverlay() {
document.getElementById("overlay").style.display = "block";
}
function hideOverlay() {
document.getElementById("overlay").style.display = "none";
}showOverlay()函数将蒙层的display属性设置为block，使其可见；hideOverlay()函数则将其设置为none，使其隐藏。
最后，你需要在你的按钮的onclick事件中调用showOverlay()函数，并在需要隐藏蒙层的地方调用hideOverlay()函数。 例如：
<button onclick="showOverlay()">显示蒙层</button> <button onclick="hideOverlay()">隐藏蒙层</button>
通过以上步骤，你就可以轻松实现点击按钮后生成页面蒙层遮罩的效果了。 记得将这些代码添加到你的HTML文件中。
以上就是点击按钮如何生成页面蒙层遮罩？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
