html遮罩层怎么写

1.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遮罩层怎么做

2.如何实现遮罩层

1/DTD/xhtml1-transitional.dtd"> "> <meta ; charset=utf-8" /> 遮罩 <style> /*遮罩层*/ #tinybox_1 { position:absolute; width:1002px; height:80px; background:#FFF; display: none; z-index: 99999; border:5px solid red; display:none; text-align:center; padding:10px } #tinybox_1 h4{ display:block; margin:0 auto; width:1002px; line-height:40px} .main{ width:98%; height:2000px; margin:0 auto; border:2px solid red; } </style> <!--遮罩 begin --> <script type="text/javascript"> function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}} function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}} function BtPopload(showId){ // 高度减去 4px,避免在页面无滚动条时显示遮罩后出现流动条 var h = (Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) - 4) + 'px'; var w = document.documentElement.scrollWidth + 'px'; var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;border:0"//遮罩背景 var rePosition_mask = function() { pop_Box.style.height = h; pop_Box.style.width = w; pop_Iframe.style.height = h; pop_Iframe.style.width = w; if (document.documentElement.offsetWidth < 950) { //防止正常宽度下点击时 在 ff 下出现页面滚动到顶部 document.documentElement.style.overflowX = "hidden"; } } var exsit = document.getElementById("popBox"); if (!exsit) { var pop_Box = document.createElement("div"); pop_Box.id = "popBox"; document.getElementsByTagName("body")[0].appendChild(pop_Box); pop_Box.style.cssText = popCss; pop_Box.style.zIndex = "10"; var pop_Iframe = document.createElement("iframe"); // 这里如果用 div 的话,在 ie6 不能把