DIV遮罩层如何实现
导读：收集整理的这篇文章主要介绍了DIV遮罩层如何实现，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天有任务让加个蒙版，JS小白的我在网上找了个修改下，改成了JS模版以后可以重复用啦。 复制代码代码如下: <!DOCTYP...
收集整理的这篇文章主要介绍了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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： DIV遮罩层如何实现
本文地址： https://pptw.com/jishu/584720.html