JS DIV模式弹出
? 在web前端开发中,某些情况下需要自定义弹出窗口。一般采用弹出DIV层的方式来实现这种效果,其基本原理是先弹出一个半透明的DIV空白层,使其长度和宽度等于html页面中body的长度和宽度。使其下层不可用,然后再弹出需要弹出的一个DIV信息层。
?? JS主要代码如下:
?? 1.ShowMask函数是弹出遮挡层,SetMaskPos是设置遮挡层的位置;
?? 设置遮挡层函数
function getNodeMask(){var nodeMask = document.createElement("div");nodeMask.id = "maskbox";nodeMask.style.width = $("body").width();nodeMask.style.height = $("body").height();return nodeMask;}function getNodeMaskInfo(title, content){var nodeMaskInfo = document.createElement("div");nodeMaskInfo.id = "maskinfo";var nodeMaskTitle = document.createElement("div");nodeMaskTitle.id = "masktitle";nodeMaskTitle.innerHTML = title;var nodeMaskContent = document.createElement("div");nodeMaskContent.id = "maskcontent";nodeMaskContent.innerHTML = content;nodeMaskInfo.appendChild(nodeMaskTitle);nodeMaskInfo.appendChild(nodeMaskContent);return nodeMaskInfo;}function SetMaskPos(oid){var scrollT = document.documentElement.scrollTop;var scrollL = document.documentElement.scrollLeft;var clientH = document.documentElement.clientHeight;var clientW = document.documentElement.clientWidth;var $obj = $(oid);var h = $obj.height();var w = $obj.width();var posL = Number(scrollL) + (Number(clientW) - Number(w))/2;var posT = Number(scrollT) + (Number(clientH) - Number(h))/2;$obj.css({"left":posL+"px", "top":posT+"px"});}??PS: 有时候会出现信息弹出层和遮挡弹出层都被遮挡的情况,这个时候可以设置信息弹出层的css参数:z-index为一个较大值,使其在div中最上层