js控制的遮罩層實例介紹_javascript技巧

閒來無事，把專案裡很土的彈窗，改成了遮罩層顯示，感覺效果好點了。上碼：
父親頁：

複製程式碼 程式碼如下:

程式碼如下:

--%>

printCertDia.jsp 便是要顯示的最上層jsp. 如果用jsp:include 頁面便會報錯，至於為什麼還沒研究，可能和加載順序有關。
（在給標籤變數取名字時候，如果變數和id名一樣時候，js也會報錯,要避免）

在父頁加上觸發顯示遮罩層js：

在這裡建立一個div和body一樣大小，這樣就可以把整個頁面全部蓋住了。 style.zIndex 來控制覆蓋的先後順序（層級） style.filter ,style.opacity 控制顯示透明°。

複製程式碼

程式碼如下:


//mask遮罩
var new 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._orollHeight); ";
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控制父頁已經定義好的 div顯示：

複製程式碼

程式碼:
複製程式碼


程式碼:


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🎜>newDivHeight = 600;

newDiv.style.width = newDiv.
newDiv.style.height = newDivHeight "px";
newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px";
newiv. style.left = (document.body.scrollLeft document.body.clientWidth / 2 - newDivWidth / 2) "px";

newDiv.style.background = "#F7F7EF"; newDiv.b = "Div.b = "Div. 1px solid #860001"; newDiv.style.padding = "5px"; newDiv.style.display=''; js控制父頁面滾動居中：

js控制父頁div >attachEvent ,addEventListener 對scroll 新增處理事件newDivCenter




複製程式碼


程式碼如下:newDiv.style.top = (document.body.scrollTop document.body.clientHeight / 2 - newDivHeight / 2) "px";
newDiv.style.left = (document.body.scrollLeft.com .body.clientWidth / 2 - newDivWidth / 2) "px";

}
if (document.all) {
window.attachEvent("onscroll", newDivCenter);

window.attachEvent("onscroll", newDivCenter); } else { window.addEventListener('scroll', newDivCenter, false); }

動態給父頁div新增關閉圖層和遮罩層（需要修改）：

複製程式碼


程式碼如下:


var newA = document.createElement("a"); 🎜>newA.href = "#";
newA.innerHTML = "關閉";
newA.onclick = function() {
if (document.all) {
window.detachEvent(" onscroll", newDivCenter);
}
else {
window.removeEventListener('scroll', newDivCenter, false);

} document.body.removeChild(Edocle(Fdocle)" ); document.body.removeChild(docEle(m)); document.getElementById("certImg").style.display=''; return false; } newDiv .appendChild(newA);