閒來無事把項目裡很土的彈窗改成了遮罩層顯示感覺效果好點了上代碼
父頁面
代碼如下:
<div id=
newDiv
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 頁面便會報錯
至於為什麼還沒研究
可能和加載順序有關
（在給標簽變量取名字時候
如果變量和id名一樣時候
js也會報錯
要避免）
在父頁面添加觸發顯示遮罩層js
在這裡創建一個div和body一樣大小
這樣就可以把整個頁面全部蓋住了
style
zIndex 來控制覆蓋的先後順序（層級）
style
filter
style
opacity 控制顯示透明°
代碼如下:
//mask遮罩層
var newMask = document
createElement("div");
newMask
id = m;
newMask
style
position = "absolute";
newMask
style
zIndex = "
";
_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 = "
px";
newMask
style
left = "
px";
newMask
style
background = "#
";
newMask
style
filter = "alpha(opacity=
)";
newMask
style
opacity = "
";
document
body
appendChild(newMask);
js控制父頁面已經定義好的div顯示
代碼如下:
newDiv=document
getElementById("newDiv
");
// var newDiv = document
createElement("div");
// newDiv
id = _id;
newDiv
style
position = "absolute";
newDiv
style
zIndex = "
";
newDivWidth =
;
newDivHeight =
;
newDiv
style
width = newDivWidth + "px";
newDiv
style
height = newDivHeight + "px";
newDiv
style
top = (document
body
scrollTop + document
body
clientHeight /
newDivHeight /
) + "px";
newDiv
style
left = (document
body
scrollLeft + document
body
clientWidth /
newDivWidth /
) + "px";
newDiv
style
background = "#F
F
EF";
newDiv
style
border = "
px solid #
";
newDiv
style
padding = "
px";
newDiv
style
display=
;
js控制父頁面div滾動居中
attachEvent
addEventListener 對scroll 添加處理事件 newDivCenter
代碼如下:
function newDivCenter() {
newDiv
style
top = (document
body
scrollTop + document
body
clientHeight /
newDivHeight /
) + "px";
newDiv
style
left = (document
body
scrollLeft + document
body
clientWidth /
newDivWidth /
) + "px";
}
if (document
all) {
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(docEle("newDiv
"));
document
body
removeChild(docEle(m));
document
getElementById("certImg")
style
display=
;
return false;
}
newDiv
appendChild(newA);
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20029.html
