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

最新推荐文章于 2021-12-10 15:50:14 发布

TT7380

最新推荐文章于 2021-12-10 15:50:14 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签：浏览器 function div 网络

本文链接：https://blog.csdn.net/TT7380/article/details/7992456

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近由于项目需要用到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;
                        }
                }
    }