js 适用于多浏览器的弹出窗口

来源：互联网发布：周杰伦台湾知乎编辑：程序博客网时间：2024/04/28 06:40

最近由于项目需要用到Js 操作弹出窗口显示，结合网络中的资源写了如下代码，如有不足，欢迎大家指点。

///创建弹出DIV层
function openDiv()
{
    oPopup = _createPopup();
    oPopupBody = oPopup.document.body;

    if(oPopupBody.addEventListener) //Firefox
    {
        oPopupBody.addEventListener('mouseout',hidePop,false);
        oPopupBody.addEventListener('mouseover',clrPopTimer,false);
    }
    else //IE
    {
        oPopupBody.attachEvent('onmouseout',hidePop);
        oPopupBody.attachEvent('onmouseover',clrPopTimer);
    }
}

function hidePop(){
    if (!oPopup.isOpen) {
        oPopTimer = setTimeout('oPopup.hide()',10);
    }
}

function clrPopTimer(){
clearTimeout(oPopTimer);
}

/*** 弹出窗口 ****/
var isIe = (document.all) ? true:false;
var eDiv = document.createElement('div'); //显示弹出窗口的图层

var _createPopup = function() {
        var SetElementStyles = function(element, styleDict) {
            var style = element.style;
            for (var styleName in styleDict) {
                style[styleName] = styleDict[styleName] ;
            }
        }

        SetElementStyles( eDiv, { 'position': 'absolute', 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'zIndex': 1000, 'display' : 'none', 'overflow' : 'hidden' } ) ;
        eDiv.body = eDiv;
        var opened = false;
        var setOpened = function(b) {
            opened = b;
        }

        var getOpened = function() {
            return opened ;
        }

        var getCoordinates = function(oElement) {
            var coordinates = {x:0,y:0};
            while(oElement) {
                coordinates.x += oElement.offsetTop ;
                coordinates.y += oElement.offsetLeft;
                oElement = oElement.offsetParent;
            }
            return coordinates;
        }

        return {
                 htmlTxt : '',
                 document : eDiv,
                 isOpen : getOpened(),
                 isShow : false,
                 hide : function() {
                            SetElementStyles( eDiv, { 'top': 0 + 'px', 'left': 0 + 'px', 'width': 0 + 'px', 'height': 0 + 'px', 'display' : 'none' } );
                            eDiv.innerHTML = '';
                            this.isShow = false;
                        },
                 show : function(iX, iY, iWidth, iHeight, oElement) {
                            if (!getOpened())
                            {
                                $(document.body).append(eDiv);
                                setOpened(true);
                            };

                            this.htmlTxt = eDiv.innerHTML;
                            if (this.isShow)
                            {
                                this.hide();
                            };

                            eDiv.innerHTML = this.htmlTxt;
                            var coordinates = getCoordinates(oElement);
                            eDiv.style.top = (iX + coordinates.x) + 'px' ;
                            eDiv.style.left = (iY + coordinates.y) + 'px';
                            eDiv.style.width = iWidth + 'px';
                            eDiv.style.height = iHeight + 'px';
                            eDiv.style.display = 'block';
                            this.isShow = true;
                        }
                }
    }