html遮罩层代码（css实现遮罩层）

今天给各位分享html遮罩层代码的知识，其中也会对css实现遮罩层进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、HTML中如何使用遮罩层
• 2、html 遮罩层页面有个对话框 点击对话框确定后怎么返回被遮罩的页面并刷新被遮罩页面
• 3、HTML实现遮罩层方法 HTML中如何使用遮罩层

HTML中如何使用遮罩层

第一步：新建一个html页面

页面中先做出一个【领红包】的按钮，如图（图中左侧是效果右侧是代码），点击这个按钮就会弹出一个红包的活动消息，即我们要的遮罩效果

css遮罩层怎么做

css遮罩层怎么做

第二步：做出遮罩层

遮罩层的作用就是将层后面的内容都遮住，覆盖全屏，所以：

宽高都设为：100%；

位置 position：absolute；left：0； top:0;

背景色 一般都设为透明的 background: rgba(0,0,0,0.5);

层的顺序 z-index:100; (设置一个比较大的数值)

css遮罩层怎么做

第三步：做出遮罩层上的内容

1、在遮罩层上添加活动效果图

2、关闭活动信息弹出框的【关闭】按钮

注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大，z-index:101

如图（左侧效果，右侧代码）

css遮罩层怎么做

css遮罩层怎么做

第四步：用js实现遮罩效果演示

首先我们看到的页面上是没有遮罩层的，只有一个【领红包】的按钮在页面中；

然后我们点就【领红包】按钮，就弹出遮罩效果；再要关闭遮罩层时点击右上角的关闭按钮，就退出了遮罩成的活动信息。具体操作如下：

1、将遮罩层隐藏起来 display：none；

2、点击【领红包】时，遮罩层显示 display：block;

3、点击关闭按钮，遮罩层消失 display：none；

如图

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

html 遮罩层页面有个对话框 点击对话框确定后怎么返回被遮罩的页面并刷新被遮罩页面

假设代码为：

div id="page"这里是被遮罩的div，目前未加样式/div

div

p提示：这里是出现遮罩层按钮,点击按钮一后出现遮罩层/p

a href="###" onclick="btn1();"按钮一/a

/div

div id="mask" style="display:none"

p提示：这里是遮罩层,点击按钮二之后遮罩层mask会消失，并且刷新页面/p

a href="###" onclick="btn2(); window.location.reload();"按钮二/a

/div

script

function btn1(){

document.getElementById("mask").style.display = "block";

}

function btn2(){

document.getElementById("mask").style.display = "none";

}

/script

提示：

1、目前未加任何遮罩效果，原理已经写给你了，自己去看。

2、page为底层，mask为遮罩层，btn1为出现遮罩按钮，btn2为消失遮罩按钮并且刷新网页！

3、有不懂的再回我

4、完全手写！请采纳！

HTML实现遮罩层方法 HTML中如何使用遮罩层

最普遍的做法遮罩层默认display:none;需要弹出的场景display:block;关闭遮罩层display:none;

html遮罩层代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css实现遮罩层、html遮罩层代码的信息别忘了在本站进行查找喔。