js控制的遮罩层实例介绍

闲来无事把项目里很土的弹窗改成了遮罩层显示感觉效果好点了上代码

父页面代码如下:<div id=newDiv style="display: none;"><%@include file=/WEBINF/jsp/infobackup/martyr/printCertDiajsp %><%<jsp:include page="/WEBINF/jsp/infobackup/martyr/printCertDiajsp" flush=”true”/> %></div>printCertDiajsp 便是要显示的最上层jsp 如果用jsp:include 页面便会报错至于为什么还没研究可能和加载顺序有关（在给标签变量取名字时候如果变量和id名一样时候js也会报错要避免）在父页面添加触发显示遮罩层js在这里创建一个div和body一样大小这样就可以把整个页面全部盖住了stylezIndex 来控制覆盖的先后顺序（层级）stylefilter styleopacity 控制显示透明°代码如下://mask遮罩层var newMask = documentcreateElement("div");newMaskid = m;newMaskstyleposition = "absolute";newMaskstylezIndex = "";_scrollWidth = Mathmax(documentbodyscrollWidth documentdocumentElementscrollWidth);_scrollHeight = Mathmax(documentbodyscrollHeight documentdocumentElementscrollHeight);newMaskstylewidth = _scrollWidth + "px";newMaskstyleheight = _scrollHeight + "px";newMaskstyletop = "px";newMaskstyleleft = "px";newMaskstylebackground = "#";newMaskstylefilter = "alpha(opacity=)";newMaskstyleopacity = "";documentbodyappendChild(newMask);js控制父页面已经定义好的div显示代码如下:newDiv=documentgetElementById("newDiv");// var newDiv = documentcreateElement("div");// newDivid = _id;newDivstyleposition = "absolute";newDivstylezIndex = "";newDivWidth = ;newDivHeight = ;newDivstylewidth = newDivWidth + "px";newDivstyleheight = newDivHeight + "px";newDivstyletop = (documentbodyscrollTop + documentbodyclientHeight / newDivHeight / ) + "px";newDivstyleleft = (documentbodyscrollLeft + documentbodyclientWidth / newDivWidth / ) + "px";newDivstylebackground = "#FFEF";newDivstyleborder = "px solid #";newDivstylepadding = "px";newDivstyledisplay=;js控制父页面div滚动居中attachEvent addEventListener 对scroll 添加处理事件 newDivCenter代码如下:function newDivCenter() {newDivstyletop = (documentbodyscrollTop + documentbodyclientHeight / newDivHeight / ) + "px";newDivstyleleft = (documentbodyscrollLeft + documentbodyclientWidth / newDivWidth / ) + "px";}if (documentall) {windowattachEvent("onscroll" newDivCenter);}else {windowaddEventListener(scroll newDivCenter false);}动态给父页面div添加关闭图层和遮罩层（需要修改）代码如下:var newA = documentcreateElement("a");newAhref = "#";newAinnerHTML = "关闭";newAonclick = function() {if (documentall) {windowdetachEvent("onscroll" newDivCenter);}else {windowremoveEventListener(scroll newDivCenter false);}documentbodyremoveChild(docEle("newDiv"));documentbodyremoveChild(docEle(m));documentgetElementById("certImg")styledisplay=;return false;}newDivappendChild(newA);