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

闲话不说，直接代码了。兼容IE8、火狐、谷歌。

//1、打开窗口        function showDialog(url)        {            var width = 400;            var height = 300;                        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.5";            maskDiv.style.filter = "alpha(opacity=50)";            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 = "2001";            container.style.left = (bdw - width) / 2 + "px";            container.style.top = (bdh - height) / 2 + "px";            container.style.width = width + "px";            container.style.height = height + "px";            container.style.position = "absolute";            container.style.backgroundColor = "#F0EEEE";            container.style.border = "1px";            container.style.borderStyle = "solid";            container.style.borderColor = "#696969";            container.style.overflow = "hidden";                        //--------------------------------------------------------------------------------Header            var dialogHeadBar = document.createElement("div");            dialogHeadBar.setAttribute("id","dialogHeadBar");            dialogContainer.appendChild(dialogHeadBar);                        var headBar = document.getElementById("dialogHeadBar");            headBar.style.width = width - 4 + "px";            headBar.style.height = "20px";            headBar.style.padding = "2px";            headBar.style.fontSize = "11px";            headBar.style.cursor = "pointer";            //headBar.onmousedown = startDrag;   //放开既可拖动                                 var barTitle = document.createElement("div");            barTitle.setAttribute("id","barTitle");            barTitle.innerHTML = "我的标题";            barTitle.style.cssFloat = "left";            barTitle.style.styleFloat = "left";                 dialogHeadBar.appendChild(barTitle);                        var closeArea = document.createElement("div");            closeArea.setAttribute("id","closeArea");            closeArea.innerHTML = "关闭";            closeArea.style.cursor = "pointer";            closeArea.style.cssFloat = "right";            closeArea.style.styleFloat = "right";            closeArea.onclick = closeDialog;            dialogHeadBar.appendChild(closeArea);                        //--------------------------------------------------------------------------------Iframe            var dialogIframe = document.createElement("iframe");            dialogIframe.setAttribute("id","dialogIframe");            dialogIframe.setAttribute("frameborder","0", 1);            dialogContainer.appendChild(dialogIframe);                        var dialogSrcIframe = document.getElementById("dialogIframe");//myIframe            dialogSrcIframe.src = url;            dialogSrcIframe.height = height - 50 + "px";            dialogSrcIframe.width = width + "px";                   dialogSrcIframe.marginHeight = "0px";               //Pixels 上下空出的高度              dialogSrcIframe.marginWidth = "0px";                //Pixels 左右空出宽度               //dialogSrcIframe.frameBorder = "0";                  //是否显示边框（0无边框 1有边框）                      dialogSrcIframe.scrolling = "yes";                  //[ yes | no | auto ] 流动条(yes强制显示|no永不显示|auto自动)            dialogSrcIframe.allowtransparency  = "yes";         //背景是否透明（yes透明 no不透明）            //--------------------------------------------------------------------------------Footer            var dialogFootBar = document.createElement("div");            dialogFootBar.setAttribute("id","dialogFootBar");            dialogContainer.appendChild(dialogFootBar);                        var footBar = document.getElementById("dialogFootBar");            footBar.style.width = width + "px";            footBar.style.height = "30px";            footBar.style.padding = "2px";            footBar.style.fontSize = "11px";                    }                //2、关闭窗口        function closeDialog()        {            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;            }        }

希望对您有帮助。O(∩_∩)O~

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