快捷導(dǎo)航

原生js的彈出層且其內(nèi)的窗口居中

更新時(shí)間：2014年05月14日 17:16:37 作者：

彈出層內(nèi)含窗口且居中，在本例使用原生js來(lái)實(shí)現(xiàn)，與網(wǎng)上的有所不一樣，大家不妨參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta charset="UTF-8"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<style type="text/css"> 
* 
{ 
padding:0px; 
margin:0px; 
} 
#Idiv 
{ 
width:900px; 
height:auto; 
position:absolute; 
z-index:1000; 
border:2px solid #ffffff; 
background:#ffffff; 
} 
</style> 

</HEAD> 
<body> 

<div id="Idiv" style="display:none;"> 
<a href="javascript:void(0)" onclick="closeDiv()">點(diǎn)擊關(guān)閉層</a> 
<br/>document.documentElement 的區(qū)別<br/>document.documentElement 的區(qū)別 
</div> 
<div><a href="javascript:void(0)" id="show" onclick="show()">點(diǎn)擊打開(kāi)彈出層！</div> 
</body> 
<script langue="javascript"> 

function show() 
{ 
var Idiv=document.getElementById("Idiv"); 
Idiv.style.display="block"; 
//以下部分要將彈出層居中顯示 
Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px"; 
//alert(document.body.scrollTop) 
var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+aa_scrollTop+"px"; 
//此處出現(xiàn)問(wèn)題，彈出層左右居中，但是高度卻不居中，顯示在上部分，導(dǎo)致一 //部分不可見(jiàn),于是暫時(shí)在下面添加margin-top 


//以下部分使整個(gè)頁(yè)面至灰不可點(diǎn)擊 
var procbg = document.createElement("div"); //首先創(chuàng)建一個(gè)div 
procbg.setAttribute("id","mybg"); //定義該div的id 
procbg.style.background ="#000000"; 
procbg.style.width ="100%"; 
procbg.style.height ="100%"; 
procbg.style.position ="fixed"; 
procbg.style.top ="0"; 
procbg.style.left ="0"; 
procbg.style.zIndex ="500"; 
procbg.style.opacity ="0.6"; 
procbg.style.filter ="Alpha(opacity=70)"; 
//取消滾動(dòng)條 
document.body.appendChild(procbg); 
document.body.style.overflow ="auto"; 

//以下部分實(shí)現(xiàn)彈出層的拖拽效果(如果想要彈出層內(nèi)的div移動(dòng),把以下注銷(xiāo)去掉即可) 
/* 
var posX; 
var posY; 
Idiv.onmousedown=function(e) 
{ 
if(!e) e = window.event; //IE 
posX = e.clientX - parseInt(Idiv.style.left); 
posY = e.clientY - parseInt(Idiv.style.top); 
document.onmousemove = mousemove; 
} 
document.onmouseup =function() 
{ 
document.onmousemove =null; 
} 
function mousemove(ev) 
{ 
if(ev==null) ev = window.event;//IE 
Idiv.style.left = (ev.clientX - posX) +"px"; 
Idiv.style.top = (ev.clientY - posY) +"px"; 
}*/ 

} 
function closeDiv() //關(guān)閉彈出層 
{ 

var Idiv=document.getElementById("Idiv"); 
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg); 
Idiv.style.display="none"; 
document.body.style.overflow ="auto";//恢復(fù)頁(yè)面滾動(dòng)條 
//document.getElementById("mybg").style.display="none"; 
} 
</script> 
</HTML> 
//改變上面的彈出層，做自己的一個(gè)loading加載的功能。判斷頁(yè)面是否加載完畢，完畢后隱藏loading.gif 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>New Document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body onload="subSomething()"> 


</body> 
<script type="text/ecmascript"> 
function show(addressImg, img_w, img_h) { 
//得到頁(yè)面高度 
var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; 
//得到頁(yè)面寬度 
var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; 
var procbg = document.createElement("div"); //首先創(chuàng)建一個(gè)div 
procbg.setAttribute("id", "mybg"); //定義該div的id 
procbg.style.background = "#555"; 
procbg.style.width = "100%"; 
procbg.style.height = "100%"; 
procbg.style.position = "fixed"; 
procbg.style.top = "0"; 
procbg.style.left = "0"; 
procbg.style.zIndex = "500"; 
procbg.style.opacity = "0.6"; 
procbg.style.filter = "Alpha(opacity=70)"; 
//取消滾動(dòng)條 
document.body.appendChild(procbg); 
document.body.style.overflow = "auto"; 


var pimg = document.createElement("img"); //創(chuàng)建一個(gè)img 
pimg.setAttribute("id", "bg_img"); //定義該div的id 
pimg.setAttribute("src", addressImg); //定義該div的id 
var img_w = (w - img_w) / 2; 
var img_h = (h - img_h) / 2; 
pimg.style.top = img_h + "px"; 
pimg.style.left = img_w + "px"; 
pimg.style.position = "fixed"; 
pimg.style.opacity = "0.9"; 
document.getElementById("mybg").appendChild(pimg); 
} 
function closeDiv() //關(guān)閉彈出層 
{ 
var mybg = document.getElementById("mybg"); 
document.body.removeChild(mybg); 
document.body.style.overflow = "auto";//恢復(fù)頁(yè)面滾動(dòng)條 
//document.getElementById("mybg").style.display="none"; 
} 
show('loading/loading3.gif', '100', '100'); 
document.onreadystatechange = subSomething;//當(dāng)頁(yè)面加載狀態(tài)改變的時(shí)候執(zhí)行這個(gè)方法. 
function subSomething() { 
if (document.readyState == "complete") { //當(dāng)頁(yè)面加載狀態(tài)為完全結(jié)束時(shí)進(jìn)入 
closeDiv(); 
} 
} 
</script> 
</html> 