今天小编跟大家讲解下有关DIV遮罩层如何实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DIV遮罩层如何实现 的相关资料，希望小伙伴们看了有所帮助。
今天有任务让加个蒙版 JS小白的我在网上找了个修改下 改成了JS模版以后可以重复用啦。 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>遮罩</title> <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 不能把 <select> 遮住 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 (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}} } function BtPopHide(Bid,Did) { var UploadBtn = document.getElementById(Bid); if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}} } </script> <!--遮罩 end --> </head> <body> <div class="main"> <select> <option>ie6下不显示</option> </select> </div> <div><input type="button"id="open_1"value="确认"></div> <!-- 遮罩层 begin --> <div id="tinybox_1"> <h4>感谢您的光临 定制需求单送出后 我们将安排专人在24小时内为您服务！</h4> <a href=""id="close_1">关闭</a> </div> <script type="text/javascript"> BtPopShow("open_1","tinybox_1"); BtPopHide("close_1","tinybox_1") </script> <!-- 遮罩层 end --> </body> </html>来源：爱蒂网
