快捷導(dǎo)航

js控制的遮罩層實(shí)例介紹

更新時(shí)間：2013年05月29日 18:16:18 作者：

把項(xiàng)目里很土的彈窗，改成了遮罩層顯示，現(xiàn)在感覺好多了。在這里創(chuàng)建一個(gè)div和body一樣大小，這樣就可以把整個(gè)頁(yè)面全部蓋住了，具體實(shí)現(xiàn)祥看本文，希望可以幫助到你

閑來(lái)無(wú)事，把項(xiàng)目里很土的彈窗，改成了遮罩層顯示，感覺效果好點(diǎn)了。上代碼：
父頁(yè)面：

復(fù)制代碼代碼如下:

 
<div id='newDiv1' style="display: none;"> 
<%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %> 
<%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp" flush=”true”/> --%> 
</div> 

printCertDia.jsp 便是要顯示的最上層jsp. 如果用jsp:include 頁(yè)面便會(huì)報(bào)錯(cuò)，至于為什么還沒(méi)研究，可能和加載順序有關(guān)。
（在給標(biāo)簽變量取名字時(shí)候，如果變量和id名一樣時(shí)候，js也會(huì)報(bào)錯(cuò),要避免）
在父頁(yè)面添加觸發(fā)顯示遮罩層js：
在這里創(chuàng)建一個(gè)div和body一樣大小，這樣就可以把整個(gè)頁(yè)面全部蓋住了。
style.zIndex 來(lái)控制覆蓋的先后順序（層級(jí)）
style.filter ,style.opacity 控制顯示透明°。

復(fù)制代碼代碼如下:

 
//mask遮罩層 
var newMask = document.createElement("div"); 
newMask.id = m; 
newMask.style.position = "absolute"; 
newMask.style.zIndex = "1"; 
_scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth); 
_scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
newMask.style.width = _scrollWidth + "px"; 
newMask.style.height = _scrollHeight + "px"; 
newMask.style.top = "0px"; 
newMask.style.left = "0px"; 
newMask.style.background = "#666"; 
newMask.style.filter = "alpha(opacity=40)"; 
newMask.style.opacity = "0.40"; 
document.body.appendChild(newMask); 

js控制父頁(yè)面已經(jīng)定義好的div顯示：

復(fù)制代碼代碼如下:

 
newDiv=document.getElementById("newDiv1"); 
// var newDiv = document.createElement("div"); 
// newDiv.id = _id; 
newDiv.style.position = "absolute"; 
newDiv.style.zIndex = "9999"; 
newDivWidth = 700; 
newDivHeight = 600; 
newDiv.style.width = newDivWidth + "px"; 
newDiv.style.height = newDivHeight + "px"; 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
newDiv.style.background = "#F7F7EF"; 
newDiv.style.border = "1px solid #860001"; 
newDiv.style.padding = "5px"; 
newDiv.style.display=''; 

js控制父頁(yè)面div滾動(dòng)居中：
attachEvent ,addEventListener 對(duì)scroll 添加處理事件 newDivCenter

復(fù)制代碼代碼如下:

 
function newDivCenter() { 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - newDivHeight / 2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - newDivWidth / 2) + "px"; 
} 
if (document.all) { 
window.attachEvent("onscroll", newDivCenter); 
} 
else { 
window.addEventListener('scroll', newDivCenter, false); 
} 

動(dòng)態(tài)給父頁(yè)面div添加關(guān)閉圖層和遮罩層（需要修改）：

復(fù)制代碼代碼如下:

 
var newA = document.createElement("a"); 
newA.href = "#"; 
newA.innerHTML = "關(guān)閉"; 
newA.onclick = function() { 
if (document.all) { 
window.detachEvent("onscroll", newDivCenter); 
} 
else { 
window.removeEventListener('scroll', newDivCenter, false); 
} 
document.body.removeChild(docEle("newDiv1")); 
document.body.removeChild(docEle(m)); 
document.getElementById("certImg").style.display=''; 
return false; 
} 
newDiv.appendChild(newA); 