DIV遮罩層如何實現

2024-07-11 08:34:59

字體：大中小

來源：轉載

供稿：網友

今天有任務讓加個蒙版，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);