首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS DIV形式弹出

2012-11-08 
JS DIV模式弹出? 在web前端开发中,某些情况下需要自定义弹出窗口。一般采用弹出DIV层的方式来实现这种效果,

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中最上层

热点排行