半成品：可继续扩展改进的弹出层对话框（2） - DIV窗口

        前面写过一个弹出对话框窗口【半成品：可继续扩展改进的弹出层对话框 - DIV窗口】，今天用到，鉴于实际项目的使用；就对原来的代码进行了扩展改进；虽然网上有好多这样那样的弹出层对话框，我也找过几个，也在项目中用过；感觉下来，有些是非常强大的，但强大的前提下就是太过“重量”，使用起来也会比较复杂；还有些就是用的时候会有比较蛋疼情况：不是这情况就是那情况，你得憋着蛋疼去一步一步的去调试。自己写的虽然不是很完整，很强大；但求够用、使用顺手、容易排错就是此版目的。如果不够用，还可以继续扩展改进(⊙o⊙)哦。

//------------------------------------------------------
// 版本：V2.0.0.0
// 功能：弹出网页对话框
// 作者：Kevin.Chen
// 日期：2012年12月11日
//------------------------------------------------------
var ourDialog = {
    //1、打开窗口
    openWindow: function(url, width, height, closeFunc) {
        //使弹出的窗口即使是有多层Iframe的情况下，照样上下、左右居中在浏览器中央
        var topParent = window.parent.parent.parent.parent;                 //这里根据Iframe层级，自己定义N个parent
        var tdsh = topParent.document.documentElement.scrollHeight;
        var tdch = topParent.document.documentElement.clientHeight;
        var tdsw = topParent.document.documentElement.scrollWidth;
        var tdcw = topParent.document.documentElement.clientWidth;

        var tbdh = (tdsh > tdch) ? tdsh : tdch;
        var tbdw = (tdsw > tdcw) ? tdsw : tdcw;

        var dsh = document.documentElement.scrollHeight;
        var dch = document.documentElement.clientHeight;
        var dsw = document.documentElement.scrollWidth;
        var dcw = document.documentElement.clientWidth;

        var bdh = (dsh > dch) ? dsh : dch;
        var bdw = (dsw > dcw) ? dsw : dcw;

        //--------------------------------------------------------------------------------遮罩层
        var maskDiv = document.createElement("div");
        maskDiv.setAttribute("id", "maskDiv");
        maskDiv.style.left = "0px";
        maskDiv.style.top = "0px";
        maskDiv.style.width = "100%";
        maskDiv.style.height = "100%";
        maskDiv.style.position = "absolute";
        maskDiv.style.zIndex = "1000";
        //maskDiv.style.backgroundColor = "#000000";
        maskDiv.style.opacity = "0.3";
        maskDiv.style.filter = "alpha(opacity=30)";
        document.body.appendChild(maskDiv);

        //--------------------------------------------------------------------------------窗口主容器
        var dialogContainer = document.createElement("div");
        dialogContainer.setAttribute("id", "dialogContainer");
        //maskDiv.appendChild(dialogContainer);
        document.body.appendChild(dialogContainer);

        var container = document.getElementById("dialogContainer");
        container.style.zIndex = "2012";
        container.style.left = (bdw - width) / 2 - (tbdw - bdw) / 2 + "px";
        container.style.top = (bdh - height) / 2 - (tbdh - bdh) / 2 + "px";
        container.style.width = width + "px";
        container.style.height = height + "px";
        container.style.position = "absolute";
        container.style.backgroundColor = "#F0EEEE";
        container.style.border = "3px";
        container.style.borderStyle = "solid";
        container.style.borderColor = "#CED1D1";
        container.style.overflow = "hidden";

        //--------------------------------------------------------------------------------Header
        var headBar = document.createElement("div");
        dialogContainer.appendChild(headBar);
        headBar.setAttribute("id", "headBar");

        headBar.style.width = width - 4 + "px";
        headBar.style.height = "20px";
        headBar.style.padding = "2px";
        headBar.style.fontSize = "11px";
        headBar.style.cursor = "pointer";
        headBar.style.backgroundColor = "#CED1D1";

        headBar.style.borderBottomWidth = "3px";
        headBar.style.borderBottomStyle = "solid";
        headBar.style.borderBottomColor = "#CED1D1";
        headBar.onmousedown = startDrag;                                    //放开既可拖动

        //--------------------------------------------------------------------------------Header Title
        var barIcon = document.createElement("div");
        headBar.appendChild(barIcon);
        barIcon.style.cssFloat = "left";
        barIcon.style.styleFloat = "left";
        barIcon.style.padding = "4px";

        var iconImg = document.createElement("img");
        iconImg.setAttribute("id", "iconImg");
        iconImg.src = "../ig_res/Default/images/igdw_RestoreHover.gif";     //这里可自行指定窗口图标
        barIcon.appendChild(iconImg);

        var barTitle = document.createElement("div");
        headBar.appendChild(barTitle);

        barTitle.setAttribute("id", "barTitle");
        //barTitle.innerHTML = title;
        barTitle.style.cssFloat = "left";
        barTitle.style.styleFloat = "left";
        barTitle.style.lineHeight = "20px";

        //--------------------------------------------------------------------------------Header closeArea
        var closeArea = document.createElement("div");
        headBar.appendChild(closeArea);

        closeArea.setAttribute("id", "closeArea");
        //closeArea.innerHTML = "关闭";
        closeArea.style.cursor = "pointer";
        closeArea.style.cssFloat = "right";
        closeArea.style.styleFloat = "right";
        closeArea.style.padding = "4px";

        closeArea.onclick = (closeFunc != null) ? closeFunc : closeDialog; //判断是否调用页面自定义关闭方法，可能关闭之前做一些其它操作

        //--------------------------------------------------------------------------------Header closeArea Img icon
        var closeImg = document.createElement("img");
        closeImg.setAttribute("id", "closeImg");
        closeImg.src = "../ig_res/Default/images/igtab_close.gif";          //这里可自行指定关闭图标
        closeArea.appendChild(closeImg);

        //--------------------------------------------------------------------------------Iframe
        var iframeElement = document.createElement("iframe");
        //dialogContainer.appendChild(iframeElement);
        iframeElement.setAttribute("id", "dialogIframe");
        iframeElement.setAttribute("frameborder", "0", 1);
        dialogContainer.appendChild(iframeElement);                         //放在这里，注掉上面，是因为iframe在IE8下边框会有凹凸框线

        iframeElement.src = url;
        iframeElement.height = height - 50 + "px";
        iframeElement.width = width + "px";
        iframeElement.marginHeight = "0px";                                 //Pixels 上下空出的高度
        iframeElement.marginWidth = "0px";                                  //Pixels 左右空出宽度
        //iframeElement.frameBorder = "0";                                  //是否显示边框（0无边框 1有边框）
        iframeElement.scrolling = "yes";                                    //[ yes | no | auto ] 流动条(yes强制显示|no永不显示|auto自动)
        iframeElement.allowtransparency = "yes";                            //背景是否透明（yes透明 no不透明）

        //--------------------------------------------------------------------------------Setting dialog title according to the iframe src page title
        if (iframeElement.attachEvent) {
            iframeElement.attachEvent("onload", function() {
                barTitle.innerHTML = iframeElement.contentWindow.document.title;
            });
        }
        else {
            iframeElement.addEventListener("onload", function() {
                barTitle.innerHTML = iframeElement.contentWindow.document.title;
            });
        }
        //--------------------------------------------------------------------------------Footer
        var footBar = document.createElement("div");
        dialogContainer.appendChild(footBar);
        footBar.setAttribute("id", "footBar");

        footBar.style.width = width + "px";
        footBar.style.height = "30px";
        footBar.style.padding = "2px";
        footBar.style.backgroundColor = "#CED1D1";
    },
    //2、关闭窗口
    closeWindow: function() {
        var maskDiv = document.getElementById("maskDiv");
        var dialogContainer = document.getElementById("dialogContainer");
        if (maskDiv) {
            //dialog.style.display = "none";            
            document.body.removeChild(maskDiv);
            document.body.removeChild(dialogContainer);
        }
    }
}

//3、拖动窗口
function startDrag() {
    var obj = document.getElementById('dialogContainer');
    rDrag.init(obj);
}


var rDrag = {
    o: null,
    init: function(o) {
        o.onmousedown = this.start;
    },
    start: function(e) {
        var o;
        e = rDrag.fixEvent(e);
        e.preventDefault && e.preventDefault();
        rDrag.o = o = this;
        o.x = e.clientX - rDrag.o.offsetLeft;
        o.y = e.clientY - rDrag.o.offsetTop;
        document.onmousemove = rDrag.move;
        document.onmouseup = rDrag.end;
    },
    move: function(e) {
        e = rDrag.fixEvent(e);
        var oLeft, oTop;
        oLeft = e.clientX - rDrag.o.x;
        oTop = e.clientY - rDrag.o.y;
        rDrag.o.style.left = oLeft + 'px';
        rDrag.o.style.top = oTop + 'px';
    },
    end: function(e) {
        e = rDrag.fixEvent(e);
        rDrag.o = document.onmousemove = document.onmouseup = null;
    },
    fixEvent: function(e) {
        if (!e) {
            e = window.event;
            e.target = e.srcElement;
            e.layerX = e.offsetX;
            e.layerY = e.offsetY;
        }
        return e;
    }
}

前段调用示例：

ourDialog.openWindow(http://www.baidu.com, 865, 510, function() { window.document.body.focus(); ourDialog.closeWindow(); });

来张效果图呗：

希望对您有所帮助！

2012年12月13日

Kevin.Chen  苏州太仓

O(∩_∩)O~