点击按钮生成页面蒙层遮罩的简易方法
本文介绍一种简单方法,在点击按钮后为页面底部图标添加阴影蒙层效果。

我们需要用到HTML和JavaScript代码来实现这个功能。 以下代码创建一个黑色半透明的遮罩层,覆盖页面,从而为底部的图标提供阴影效果:
这段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()函数。 例如:
通过以上步骤,你就可以轻松实现点击按钮后生成页面蒙层遮罩的效果了。 记得将这些代码添加到你的HTML文件中。










