html遮罩层怎么写 _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 不能把遮住 pop_Iframe.id = "popIframe"; document.getElementsByTagName("body")[0].appendChild(pop_Iframe); pop_Iframe.style.cssText = popCss; pop_Iframe.style.zIndex = "9"; rePosition_mask(); } BtShow("popIframe"); BtShow("popBox"); BtShow(showId); var pop_Win = document.getElementById(showId); pop_Win.style.position = "absolute"; pop_Win.style.zIndex = "11"; var rePosition_pop = function() { pop_Win.style.top = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight/2 - pop_Win.offsetHeight/2 + 'px'; pop_Win.style.left = document.documentElement.scrollLeft + document.body.scrollLeft + document.documentElement.clientWidth/2 - pop_Win.offsetWidth/2 + 'px'; } rePosition_pop(); window.onresize = function(){ w = document.documentElement.offsetWidth + 'px'； // 使用 scrollWidth 不能改变宽度 rePosition_mask(); rePosition_pop(); } window.onscroll = function(){ rePosition_pop(); } } function BtPopShow(Bid,Did) { var UploadBtn = document.getElementById(Bid); if (Uploa 。