Javascript公共脚本库系列(四) 改进的弹出层脚本

核心提示： 实现思路:1.为每个弹出层动态的在Body元素上添加一个div, div中包含一个iframe元素. 当弹出层显示时设置iframe的位置和长宽与弹出层相同, zIndex值为弹出层-1, 关闭时弹出层时也隐藏iframe.2.iframe和iframe的容器div在第一次弹出时创建, 以

实现思路:

1.为每个弹出层动态的在Body元素上添加一个div, div中包含一个iframe元素. 当弹出层显示时设置iframe的位置和长宽与弹出层相同, zIndex值为弹出层-1, 关闭时弹出层时也隐藏iframe.

2.iframe和iframe的容器div在第一次弹出时创建, 以后再弹出和关闭不会重新创建.

3.每一个弹出层都会有一个对应的iframe, 以满足一个页面同时弹出多个弹出层的需求

实现代码:

修改后的showDivCommon和closeDivCommon方法:

//　 显示图层,再次调用则隐藏
/*　 参数说明:
sObj　　　　　　　 : 要弹出图层的事件源
divId　　　　　　 : 要显示的图层ID　　　
moveTop　　　　 : 手工向下移动的偏移量.不移动则为0(默认).
moveLeft　　　 : 手工向左移动的距离.不移动则为0(默认).
　　　
用法与测试:
<div><a href="#" onclick="ScriptHelperV2.showDivCommon(this,'testDiv', 20, 20)">事件源</a></div>　
*/
scriptHelperV2.prototype.showDivCommon = function(sObj, divId, moveTop, moveLeft) {

　　　 //取消冒泡事件
　　　 if (typeof (window) != 'undefined' && window != null && window.event != null) {
　　　　　　　 window.event.cancelBubble = true;
　　　 }
　　　 else if (ScriptHelperV2.showDivCommon.caller.arguments[0] != null) {
　　　　　　　 ScriptHelperV2.showDivCommon.caller.arguments[0].cancelBubble = true;
　　　 }

　　　 //参数检测.如果没有传入参数则设置默认值
　　　 if (moveLeft == null) {
　　　　　　　 moveLeft = 0;
　　　 }
　　　 if (moveTop == null) {
　　　　　　　 moveTop = 0;
　　　 }

　　　 var divObj = document.getElementById(divId); //获得弹出图层对象　　　
　　　 var sObjOffsetTop = 0;　　　　　 //事件源的垂直距离
　　　 var sObjOffsetLeft = 0;　　　　 //事件源的水平距离

　　　 var position = this.getPosition(sObj); //获取事件源对象的偏移量
　　　 var myClient = this.getClient();　　　　　　 //获取屏幕大小　
　　　 var myScroll = this.getScroll();　　　　　　 //获取滚动条滚动的举例
　　　 var sWidth = sObj.offsetWidth != null ? parseInt(sObj.offsetWidth) : 0;　　　 //事件源对象的宽度
　　　 var sHeight = sObj.offsetHeight != null ? parseInt(sObj.offsetHeight) : 20; //事件源对象的高度
　　　 var popDivWidth = 0;　　　 //弹出层的宽度
　　　 var popDivHeight = 0;　　 //弹出层的高度
　　　 var bottomSpace;　　　　　　　 //距离底部的距离

　　　 var iframeDivId = "tempIframeDiv" + divId;　 //iframe所在div的id
　　　 var iframeId = "tempIframe" + divId;　　　　　　　 //iframe的id
　　　 var iframeDiv = document.getElementById(iframeDivId); //iframe所在div对象
　　　 var iframe = document.getElementById(iframeId); //iframe对象


　　　 if (divObj.style.display.toLowerCase() != "none") {
　　　　　　　 //隐藏图层
　　　　　　　 divObj.style.display = "none";
　　　　　　　 //隐藏iframe
　　　　　　　 if (iframe != null) {
　　　　　　　　　　　 iframe.style.display = "none";
　　　　　　　 }

　　　　　　　 if (iframeDiv != null) {
　　　　　　　　　　　 iframeDiv.style.display = "none";
　　　　　　　 }
　　　 }
　　　 else {
　　　　　　　 if (sObj == null) {
　　　　　　　　　　　 alert("事件源对象为null");
　　　　　　　　　　　 return false;
　　　　　　　 }

　　　　　　　 //先显示图层,才能获取到弹出层的长宽
　　　　　　　 divObj.style.display = "block";
　　　　　　　 popDivWidth = divObj.offsetWidth != null ? parseInt(sObj.offsetWidth) : 0;　　　　　 //弹出层宽度
　　　　　　　 popDivHeight = divObj.offsetHeight != null ? parseInt(divObj.offsetHeight) : 0;　 //弹出层高度

　　　　　　　 /* 获取距离底部的距离 */
　　　　　　　 bottomSpace = parseInt(myClient.clientHeight) - (parseInt(position.OffsetTop) - parseInt(myScroll.scrollTop)) - parseInt(sHeight);

　　　　　　　 /* 设置图层显示位置 */
　　　　　　　 //如果事件源下方空间不足且上方控件足够容纳弹出层,则在上方显示.否则在下方显示
　　　　　　　 if (popDivHeight > 0 && bottomSpace < popDivHeight && position.OffsetTop > popDivHeight) {
　　　　　　　　　　　 divObj.style.top = (parseInt(position.OffsetTop) - parseInt(popDivHeight)).toString() + "px";
　　　　　　　 }
　　　　　　　 else {
　　　　　　　　　　　 divObj.style.top = (parseInt(position.OffsetTop) + parseInt(sHeight)).toString() + "px";

　　　　　　　 }
　　　　　　　 divObj.style.left = (parseInt(position.OffsetLeft) - parseInt(moveLeft)).toString() + "px";


　　　 }

　　　 //如果遮盖iframe层不存在则创建
　　　 if (iframe == null) {
　　　　　　　 //ie6下使用dom添加节点后无法控制某些属性, 所以将iframe放在一个div中,这样才可以用写html的方式添加.
　　　　　　　 var tempIframeDiv = document.createElement("div");
　　　　　　　 tempIframeDiv.setAttribute("id", iframeDivId);
　　　　　　　 document.body.appendChild(tempIframeDiv);

　　　　　　　 var iframeString = "<iframe id="" + iframeId + "" style="position: absolute; display:none; border-width:0px;"></iframe>";
　　　　　　　 tempIframeDiv.innerHTML = iframeString;
　　　　　　　 iframe = document.getElementById(iframeId);
　　　 }
　　　 //使用遮盖层遮住select控件
　　　 if (iframe != null) {
　　　　　　　 iframe.style.top = divObj.style.top;
　　　　　　　 iframe.style.left = divObj.style.left;
　　　　　　　 iframe.style.width = divObj.offsetWidth.toString() + "px";
　　　　　　　 iframe.style.height = divObj.offsetHeight.toString() + "px";
　　　　　　　 iframe.style.display = "block";
　　　　　　　 iframe.style.zIndex = divObj.style.zIndex - 1;
　　　 }

}


//　 关闭图层
/*　 参数说明:
divId　　　　　　　 : 要隐藏的图层ID　　　
　　　
用法与测试:
ScriptHelperV2.closeDivCommon('testDiv');　　　
*/
scriptHelperV2.prototype.closeDivCommon = function(divId) {

　　　 var iframeDivId = "tempIframeDiv" + divId;　 //iframe所在div的id
　　　 var iframeId = "tempIframe" + divId;　　　　　　　 //iframe的id
　　　
　　　 var divObj = document.getElementById(divId); //获得图层对象　　　
　　　 if (divObj != null) {
　　　　　　　 divObj.style.display = "none";
　　　 }

　　　 var iframe = document.getElementById(iframeId);
　　　 if (iframe != null) {
　　　　　　　 iframe.style.display = "none";
　　　 }

　　　 var iframeDiv = document.getElementById(iframeDivId);
　　　 if (iframeDiv != null) {
　　　　　　　 iframe.style.display = "none";
　　　 }
}