[JS] 实现Vista操作系统对话框效果

来源：http://www.pc40.cn/html/ASPbiancheng/qitaxiangguan/20100102/513.html

附件1：http://www.5-studio.com/wp-content/uploads/2009/06/Dialog.rar

附件2：http://www.5-studio.com/wp-content/uploads/2009/11/zDialog.rar

Dialog.js文件的代码

var CONTEXTPATH = 'http://www.5-studio.com/wp-content/uploads/2009/06/';//图片路径配置
//var CONTEXTPATH = 'images/';//图片路径配置
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;

function $(ele) {
  if (typeof(ele) == 'string'){
    ele = document.getElementById(ele)
    if(!ele){
          return null;
    }
  }
  if(ele){
      Core.attachMethod(ele);
    }
  return ele;
}
function $T(tagName,ele){
    ele = $(ele);
    ele = ele || document;
    var ts = ele.getElementsByTagName(tagName);//此处返回的不是数组
    var arr = [];
    var len = ts.length;
    for(var i=0;i<len;i++){
        arr.push($(ts[i]));
    }
    return arr;
}
function stopEvent(event){//阻止一切事件执行,包括浏览器默认的事件
    event = window.event||event;
    if(!event){
        return;
    }
    if(isGecko){
        event.preventDefault();
        event.stopPropagation();
    }
    event.cancelBubble = true
    event.returnValue = false;
}

Array.prototype.remove = function(s){
  for(var i=0;i<this.length;i++){
    if(s == this[i]){
        this.splice(i, 1);
    }
  }
}
if(window.HTMLElement){//给FF添加IE专有的属性和方法
    HTMLElement.prototype.__defineGetter__("parentElement",function(){
        if(this.parentNode==this.ownerDocument)return null;
        return this.parentNode;
        });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML){
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
        });
    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
        var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName;
        for(var i=0;i<attrs.length;i++){
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+attr.value+'"';
            }
        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName+">";
        });
    HTMLElement.prototype.__defineSetter__("innerText",function(sText){
        var parsedText=document.createTextNode(sText);
        this.innerHTML=parsedText;
        return parsedText;
        });
    HTMLElement.prototype.__defineGetter__("innerText",function(){
        var r=this.ownerDocument.createRange();
        r.selectNodeContents(this);
        return r.toString();
        });
}

var $E = {};
$E.getTopLevelWindow = function(){
    var pw = window;
    while(pw!=pw.parent){
        pw = pw.parent;
    }
    return pw;
}
$E.hide = function(ele) {
    ele = ele || this;
    ele = $(ele);
  ele.style.display = 'none';
}
$E.show = function(ele) {
    ele = ele || this;
    ele = $(ele);
  ele.style.display = '';
}
var Core = {};
Core.attachMethod = function(ele){
    if(!ele||ele["$A"]){
        return;
    }
    if(ele.nodeType==9){
        return;
    }
    var win;
    try{
        if(isGecko){        
            win = ele.ownerDocument.defaultView;
        }else{
            win = ele.ownerDocument.parentWindow;
        }
        for(var prop in $E){
            ele[prop] = win.$E[prop];
        }
    }catch(ex){
        //alert("Core.attachMethod:"+ele)//有些对象不能附加属性，如flash
    }
}

function Dialog(strID){
        if(!strID){
            alert("错误的Dialog ID！");
            return;
        }
        this.ID = strID;
        this.isModal = true;
        this.Width = 400;
        this.Height = 300;
        this.Top = 0;
        this.Left = 0;
        this.ParentWindow = null;
        this.onLoad = null;
        this.Window = null;
        
        this.Title = "";
        this.URL = null;
        this.DialogArguments = {};
        this.WindowFlag = false;
        this.Message = null;
        this.MessageTitle = null;
        this.ShowMessageRow = false;
        this.ShowButtonRow = true;
        this.Icon = null;
        this.bgdivID=null;
}

Dialog._Array = [];

Dialog.prototype.showWindow = function(){
    if(isIE){
        this.ParentWindow.showModalessDialog( this.URL, this.DialogArguments, "dialogWidth:" + this.Width + ";dialogHeight:" + this.Height + ";help:no;scroll:no;status:no") ;
    }
    if(isGecko){
        var sOption  = "location=no,menubar=no,status=no;toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=no";
        this.Window = this.ParentWindow.open( '', this.URL, sOption, true ) ;
        var w = this.Window;
        if ( !w ){
            alert( "发现弹出窗口被阻止，请更改浏览器设置，以便正常使用本功能!" ) ;
            return ;
        }
        w.moveTo( this.Left, this.Top ) ;
        w.resizeTo( this.Width, this.Height+30 ) ;
        w.focus() ;
        w.location.href = this.URL ;
        w.Parent = this.ParentWindow;
        w.dialogArguments = this.DialogArguments;
    }
}

Dialog.prototype.show = function(){
    var pw = $E.getTopLevelWindow();
    var doc = pw.document;
    var cw = doc.compatMode == "BackCompat"?doc.body.clientWidth:doc.documentElement.clientWidth;
    var ch = doc.compatMode == "BackCompat"?doc.body.clientHeight:doc.documentElement.clientHeight;//必须考虑文本框处于页面边缘处，控件显示不全的问题
    var sl = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
    var st = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);//考虑滚动的情况
    var sw = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
    var sh = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);//考虑滚动的情况
    sw=Math.max(sw,cw);
    sh=Math.max(sh,ch);
//    alert("\n"+cw+"\n"+ch+"\n"+sw+"\n"+sh)

if ( !this.ParentWindow ){
         this.ParentWindow = window ;
    }    
    this.DialogArguments._DialogInstance = this;
    this.DialogArguments.ID = this.ID;
    
    if(!this.Height){
        this.Height = this.Width/2;
    }
    
    if(this.Top==0){
        this.Top = (ch - this.Height - 30) / 2 + st - 8;
    }
    if(this.Left==0){
        this.Left = (cw - this.Width - 12) / 2 +sl;
    }
    if(this.ShowButtonRow){//按钮行高36
        this.Top -= 18;
    }
    if(this.WindowFlag){
        this.showWindow();
        return;
    }
    var arr = [];
    arr.push("<table style='-moz-user-select:none;' oncontextmenu='stopEvent(event);' onselectstart='stopEvent(event);' border='0' cellpadding='0' cellspacing='0' width='"+(this.Width+26)+"'>");
    arr.push("  <tr style='cursor:;'>");
    arr.push("    <td width='13' height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_lt.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_lt.png', sizingMethod='crop');\"><div style='13px;'></div></td>");
    arr.push("    <td height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_ct.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_ct.png', sizingMethod='crop');\"><div style=\"float:left;font-weight:bold; color:#FFFFFF; padding:9px 0 0 4px;\"><img src=\""+CONTEXTPATH+"icon_dialog.gif\" align=\"absmiddle\">&nbsp;"+this.Title+"</div>");
    arr.push("      <div style=\"position: relative;cursor:pointer; float:right; margin:5px 0 0; _margin:4px 0 0;height:17px; 28px; background-image:url("+CONTEXTPATH+"dialog_closebtn.gif)\" onMouseOver=\"this.style.backgroundImage='url("+CONTEXTPATH+"dialog_closebtn_over.gif)'\" onMouseOut=\"this.style.backgroundImage='url("+CONTEXTPATH+"dialog_closebtn.gif)'\" drag='false' onClick=\"Dialog.getInstance('"+this.ID+"').CancelButton.onclick.apply(Dialog.getInstance('"+this.ID+"').CancelButton,[]);\"></div></td>");
    arr.push("    <td width='13' height='33' style=\"background-image:url("+CONTEXTPATH+"dialog_rt.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_rt.png', sizingMethod='crop');\"><div style=\"13px;\"></div></td>");
    arr.push("  </tr>");
    arr.push("  <tr drag='false'><td width='13' style=\"background-image:url("+CONTEXTPATH+"dialog_mlm.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_mlm.png', sizingMethod='crop');\"></td>");
    arr.push("    <td align='center' valign='top'>");
    arr.push("    <table width='100%' border='0' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF'>");
    arr.push("        <tr id='_MessageRow_"+this.ID+"' style='display:none'>");
    arr.push("          <td height='50' valign='top'><table id='_MessageTable_"+this.ID+"' width='100%' border='0' cellspacing='0' cellpadding='8' style=\" background:#EAECE9 url("+CONTEXTPATH+"dialog_bg.jpg) no-repeat right top;\">");
    arr.push("              <tr><td width='25' height='50' align='right'><img id='_MessageIcon_"+this.ID+"' src='"+CONTEXTPATH+"window.gif' width='32' height='32'></td>");
    arr.push("                <td align='left' style='line-height:16px;'>");
    arr.push("                <h5 class='fb' id='_MessageTitle_"+this.ID+"'>&nbsp;</h5>");
    arr.push("                <div id='_Message_"+this.ID+"'>&nbsp;</div></td>");
    arr.push("              </tr></table></td></tr>");
    arr.push("        <tr><td align='center' valign='top'>");
    arr.push("          <iframe src='");
    if(this.URL.indexOf(":")==-1){
        arr.push(CONTEXTPATH+this.URL);
    }else{
        arr.push(this.URL);
    }
    arr.push("' id='_DialogFrame_"+this.ID+"' allowTransparency='true'  width='"+this.Width+"' height='"+this.Height+"' frameborder='0' style=\"background-color: #transparent; border:none;\"></iframe></td></tr>");
    arr.push("        <tr drag='false' id='_ButtonRow_"+this.ID+"'><td height='36'>");
    arr.push("            <div id='_DialogButtons_"+this.ID+"' style='text-align:right; border-top:#dadee5 1px solid; padding:8px 20px; background-color:#f6f6f6;'>");
    arr.push("               <input id='_ButtonOK_"+this.ID+"'  type='button' value='确 定'>");
    arr.push("               <input id='_ButtonCancel_"+this.ID+"'  type='button' onclick=\"Dialog.getInstance('"+this.ID+"').close();\" value='取 消'>");
    arr.push("            </div></td></tr>");
    arr.push("      </table></td>");
    arr.push("    <td width='13' style=\"background-image:url("+CONTEXTPATH+"dialog_mrm.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_mrm.png', sizingMethod='crop');\"></td></tr>");
    arr.push("  <tr><td width='13' height='13' style=\"background-image:url("+CONTEXTPATH+"dialog_lb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_lb.png', sizingMethod='crop');\"></td>");
    arr.push("    <td style=\"background-image:url("+CONTEXTPATH+"dialog_cb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_cb.png', sizingMethod='crop');\"></td>");
    arr.push("    <td width='13' height='13' style=\"background-image:url("+CONTEXTPATH+"dialog_rb.png) !important;background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+CONTEXTPATH+"dialog_rb.png', sizingMethod='crop');\"></td>");
    arr.push("  </tr></table>");
    this.TopWindow = pw;
    
    var bgdiv = pw.$("_DialogBGDiv");
    if(!bgdiv){
        bgdiv = pw.document.createElement("div");    
        bgdiv.id = "_DialogBGDiv";
        $E.hide(bgdiv);
         pw.$T("body")[0].appendChild(bgdiv);
    }

    var div = pw.$("_DialogDiv_"+this.ID);
    if(!div){
        div = pw.document.createElement("div");    
        $E.hide(div);
        div.id = "_DialogDiv_"+this.ID;
        div.className = "dialogdiv";
        div.setAttribute("dragStart","Dialog.dragStart");                
         pw.$T("body")[0].appendChild(div);
    }
    /*div.onmousedown = function(evt){
        var w = $E.getTopLevelWindow();
        //w.DragManager.onMouseDown(evt||w.event,this);//拖拽处理
    }*/

    this.DialogDiv = div;
    div.innerHTML = arr.join('\n');    
    
    pw.$("_DialogFrame_"+this.ID).DialogInstance = this;
    
    this.OKButton = pw.$("_ButtonOK_"+this.ID);
    this.CancelButton = pw.$("_ButtonCancel_"+this.ID);

    //显示标题图片
    if(this.ShowMessageRow){
        $E.show(pw.$("_MessageRow_"+this.ID));
        if(this.MessageTitle){
            pw.$("_MessageTitle_"+this.ID).innerHTML = this.MessageTitle;
        }
        if(this.Message){
            pw.$("_Message_"+this.ID).innerHTML = this.Message;
        }
    }
    
    //显示按钮栏
    if(!this.ShowButtonRow){
        pw.$("_ButtonRow_"+this.ID).hide();
    }
    if(this.CancelEvent){
        this.CancelButton.onclick = this.CancelEvent;
    }
    if(this.OKEvent){
        this.OKButton.onclick = this.OKEvent;
    }
    if(!this.AlertFlag){
        $E.show(bgdiv);
        this.bgdivID = "_DialogBGDiv";
    }else{
        bgdiv = pw.$("_AlertBGDiv");
        if(!bgdiv){
            bgdiv = pw.document.createElement("div");    
            bgdiv.id = "_AlertBGDiv";
            $E.hide(bgdiv);
             pw.$T("body")[0].appendChild(bgdiv);
            bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);" + sw + "px;height:" + sh + "px;z-index:991";
        }
        $E.show(bgdiv);
        this.bgdivID = "_AlertBGDiv";
    }
    this.DialogDiv.style.cssText = "position:absolute; display:block;z-index:"+(this.AlertFlag?992:990)+";left:"+this.Left+"px;top:"+this.Top+"px";

    //判断当前窗口是否是对话框，如果是，则将其置在bgdiv之后
    if(!this.AlertFlag){
        var win = window;
        var flag = false;
        while(win!=win.parent){//需要考虑父窗口是弹出窗口中的一个iframe的情况
            if(win._DialogInstance){
                win._DialogInstance.DialogDiv.style.zIndex = 959;
                flag = true;
                break;
            }
            win = win.parent;
        }
        if(!flag){
            bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);" + sw + "px;height:" + sh + "px;z-index:960";
        }
    }
    this.OKButton.focus();
    //放入队列中，以便于ESC时正确关闭
    pw.Dialog._Array.push(this.ID);
}

Dialog.prototype.addParam = function(paramName,paramValue){
        this.DialogArguments[paramName] = paramValue;
}

Dialog.prototype.close = function(){
    if(this.WindowFlag){
        this.ParentWindow.$D = null;
        this.ParentWindow.$DW = null;
        this.Window.opener = null;
        this.Window.close();
        this.Window = null;
    }else{
        //如果上级窗口是对话框，则将其置于bgdiv前        
        var pw = $E.getTopLevelWindow();
        var win = window;
        var flag = false;
        while(win!=win.parent){
            if(win._DialogInstance){
                flag = true;
                win._DialogInstance.DialogDiv.style.zIndex = 960;
                break;
            }
            win = win.parent;
        }
        if(this.AlertFlag){
            $E.hide(pw.$("_AlertBGDiv"));
        }
        if(!flag&&!this.AlertFlag){//此处是为处理弹出窗口被关闭后iframe立即被重定向时背景层不消失的问题
            pw.eval('window._OpacityFunc = function(){var w = $E.getTopLevelWindow();$E.hide(w.$("_DialogBGDiv"));}');
            pw._OpacityFunc();
        }
        this.DialogDiv.outerHTML = "";
        pw.Dialog._Array.remove(this.ID);
    }
}

Dialog.prototype.addButton = function(id,txt,func){
    var html = "<input id='_Button_"+this.ID+"_"+id+"' type='button' value='"+txt+"'> ";
    var pw = $E.getTopLevelWindow();
    pw.$("_DialogButtons_"+this.ID).$T("input")[0].getParent("a").insertAdjacentHTML("beforeBegin",html);
    pw.$("_Button_"+this.ID+"_"+id).onclick = func;
}

Dialog.close = function(evt){
    window.Args._DialogInstance.close();
}

Dialog.getInstance = function(id){
    var pw = $E.getTopLevelWindow()
    var f = pw.$("_DialogFrame_"+id);
    if(!f){
        return null;
    }
    return f.DialogInstance;
}

Dialog.AlertNo = 0;
Dialog.alert = function(msg,func,w,h){
    var pw = $E.getTopLevelWindow()
    var diag = new Dialog("_DialogAlert"+Dialog.AlertNo++);
    diag.ParentWindow = pw;
    diag.Width = w?w:300;
    diag.Height = h?h:120;
    diag.Title = "系统提示";
    diag.URL = "javascript:void(0);";
    diag.AlertFlag = true;
    diag.CancelEvent = function(){
        diag.close();
        if(func){
            func();
        }
    };
    diag.show();
    pw.$("_AlertBGDiv").style.display="";
    $E.hide(pw.$("_ButtonOK_"+diag.ID));
    var win = pw.$("_DialogFrame_"+diag.ID).contentWindow;
    var doc = win.document;
    doc.open();
    doc.write("<body oncontextmenu='return false;'></body>") ;
    var arr = [];
    arr.push("<table height='100%' border='0' align='center' cellpadding='10' cellspacing='0'>");
    arr.push("<tr><td align='right'><img id='Icon' src='"+CONTEXTPATH+"icon_alert.gif' width='34' height='34' align='absmiddle'></td>");
    arr.push("<td align='left' id='Message' style='font-size:9pt'>"+msg+"</td></tr></table>");
    var div = doc.createElement("div");
    div.innerHTML = arr.join('');
    doc.body.appendChild(div);
    doc.close();
    var h = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
    var w = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
    if(w>300){
        win.frameElement.width = w;
    }
    if(h>120){
        win.frameElement.height = h;
    }
    
    diag.CancelButton.value = "确 定";
    diag.CancelButton.focus();
    pw.$("_DialogButtons_"+diag.ID).style.textAlign = "center";
}

Dialog.confirm = function(msg,func1,func2,w,h){
    var pw = $E.getTopLevelWindow()
    var diag = new Dialog("_DialogAlert"+Dialog.AlertNo++);
    diag.Width = w?w:300;
    diag.Height = h?h:120;
    diag.Title = "信息确认";
    diag.URL = "javascript:void(0);";
    diag.AlertFlag = true;
    diag.CancelEvent = function(){
        diag.close();
        if(func2){
            func2();
        }
    };
    diag.OKEvent = function(){
        diag.close();
        if(func1){
            func1();
        }
    };
    diag.show();
    pw.$("_AlertBGDiv").style.dispaly="";
    var win = pw.$("_DialogFrame_"+diag.ID).contentWindow;
    var doc = win.document;
    doc.open();
    doc.write("<body oncontextmenu='return false;'></body>") ;
    var arr = [];
    arr.push("<table height='100%' border='0' align='center' cellpadding='10' cellspacing='0'>");
    arr.push("<tr><td align='right'><img id='Icon' src='"+CONTEXTPATH+"icon_query.gif' width='34' height='34' align='absmiddle'></td>");
    arr.push("<td align='left' id='Message' style='font-size:9pt'>"+msg+"</td></tr></table>");
    var div = doc.createElement("div");
    div.innerHTML = arr.join('');
    doc.body.appendChild(div);
    doc.close();
    diag.OKButton.focus();
    pw.$("_DialogButtons_"+diag.ID).style.textAlign = "center";
}

var _DialogInstance = window.frameElement?window.frameElement.DialogInstance:null;
var Page={};
Page.onDialogLoad = function(){
    if(_DialogInstance){
        if(_DialogInstance.Title){
            document.title = _DialogInstance.Title;
        }
        window.Args = _DialogInstance.DialogArguments;
        _DialogInstance.Window = window;
        window.Parent = _DialogInstance.ParentWindow;
    }
}

Page.onDialogLoad();

PageOnLoad=function (){
    var d = _DialogInstance;
    if(d){
        try{
            d.ParentWindow.$D = d;
            d.ParentWindow.$DW = d.Window;
            var flag = false;
            if(!this.AlertFlag){
                var win = d.ParentWindow;
                while(win!=win.parent){
                    if(win._DialogInstance){
                        flag = true;
                        break;
                    }
                    win = win.parent;
                }
                if(!flag){
                    $E.getTopLevelWindow().$("_DialogBGDiv").style.opacity="0";
                    $E.getTopLevelWindow().$("_DialogBGDiv").style.filter="alpha(opacity=0)";
                }
            }
            if(d.AlertFlag){
                $E.show($E.getTopLevelWindow().$("_AlertBGDiv"));
            }
            if(d.ShowButtonRow&&$E.visible(d.CancelButton)){
                d.CancelButton.focus();
            }
            if(d.onLoad){
                d.onLoad();
            }
        }catch(ex){alert("DialogOnLoad:"+ex.message+"\t("+ex.fileName+" "+ex.lineNumber+")");}
    }
}

Dialog.onKeyUp = function(event){
    if(event.keyCode==9){
        var pw = $E.getTopLevelWindow();
        if(pw.Dialog._Array.length>0){
            stopEvent(event);
        }
    }
    if(event.keyCode==27){
        var pw = $E.getTopLevelWindow();
        if(pw.Dialog._Array.length>0){
            //Page.mousedown();
            //Page.click();
            var diag = pw.Dialog.getInstance(pw.Dialog._Array[pw.Dialog._Array.length-1]);
            diag.CancelButton.onclick.apply(diag.CancelButton,[]);
        }
    }
}

Dialog.dragStart = function(evt){
    //DragManager.doDrag(evt,this.getParent("div"));//拖拽处理
}
Dialog.setPosition=function(){
    if(window.parent!=window)return;
    var pw = $E.getTopLevelWindow();
    var DialogArr=pw.Dialog._Array;
    if(DialogArr==null||DialogArr.length==0)return;
    
    for(i=0;i<DialogArr.length;i++)
    {
        pw.$("_DialogFrame_"+DialogArr[i]).DialogInstance.setPosition();
    }
}
Dialog.prototype.setPosition=function(){
    var pw = $E.getTopLevelWindow();
    var doc = pw.document;
    var cw = doc.compatMode == "BackCompat"?doc.body.clientWidth:doc.documentElement.clientWidth;
    var ch = doc.compatMode == "BackCompat"?doc.body.clientHeight:doc.documentElement.clientHeight;//必须考虑文本框处于页面边缘处，控件显示不全的问题
    var sl = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
    var st = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);//考虑滚动的情况
    var sw = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
    var sh = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
    sw=Math.max(sw,cw);
    sh=Math.max(sh,ch);
    this.Top = (ch - this.Height - 30) / 2 + st - 8;//有8像素的透明背景
    this.Left = (cw - this.Width - 12) / 2 +sl;
    if(this.ShowButtonRow){//按钮行高36
        this.Top -= 18;
    }
    this.DialogDiv.style.top=this.Top+"px";
    this.DialogDiv.style.left=this.Left+"px";
    pw.$(this.bgdivID).style.width= sw + "px";
    pw.$(this.bgdivID).style.height= sh + "px";
}

//按ESC关闭对话框
if(isIE){
    document.attachEvent("onkeydown",Dialog.onKeyUp);
    window.attachEvent("onload",PageOnLoad);
    window.attachEvent('onresize',Dialog.setPosition);
}else{
    document.addEventListener("keydown",Dialog.onKeyUp,false);
    window.addEventListener("load",PageOnLoad,false);
    window.addEventListener('resize',Dialog.setPosition,false);
}

使用实例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS仿Vista操作系统代码</title>
<style>
    body { background: #ffffff; color: #444; }
    a{ color: #09d; text-decoration: none; border: 0; background-color: transparent; }
    body,div,q,iframe,form,h5{ margin: 0; padding: 0; }
    img,fieldset { border: none 0; }
    body,td,textarea { word-break: break-all; word-wrap: break-word; line-height:1.5; }
    body,input,textarea,select,button { margin: 0; font-size: 12px; font-family: Tahoma, SimSun, sans-serif; }
    div,p,table,th,td { font-size:1em; font-family:inherit; line-height:inherit; }
    h5{ font-size:12px; }
</style>
<script type="text/javascript" src="Dialog.js"></script>
<script type="text/javascript">
    /*
    function $(ele) { 
      if (typeof(ele) == 'string'){ 
        ele = document.getElementById(ele)
        if(!ele){ return null; }
      }
      if(ele){ Core.attachMethod(ele); }
      return ele;
    }
    */
    /*
    var Core = { };
    Core.attachMethod = function(ele){ 
      if(!ele||ele["$A"]){ return; }
      if(ele.nodeType==9){ return; }
      
      var win;
      try{ 
        if(isGecko){  
          win = ele.ownerDocument.defaultView;
        }else{ 
          win = ele.ownerDocument.parentWindow;
        }
        
        for(var prop in $E){ 
          ele[prop] = win.$E[prop];
        }
      }catch(ex){ 
        //alert("Core.attachMethod:"+ele)  // 有些对象不能附加属性，如flash
      }
    }
    */
    function zOpenD(){ 
      var diag = new Dialog("Diag1");
      diag.Width = 900;
      diag.Height = 400;
      diag.Title = "弹出窗口示例";
      diag.URL = "http://www.aspprogram.cn/";
      diag.ShowMessageRow = true;
      diag.MessageTitle = "弹出窗口示例";
      diag.Message = "在这儿你可以对这个窗口的内容或功能作一些说明";
      diag.OKEvent = zAlert;  // 点击确定后调用的方法
      diag.show();
    }
    
    function zOpen(){ 
      var diag = new Dialog("Diag2");
      diag.Width = 900;
      diag.Height = 400;
      diag.Title = "弹出窗口示例";
      diag.URL = "http://www.aspprogram.cn/";
      diag.OKEvent = zAlert;  // 点击确定后调用的方法
      diag.show();
    }
    
    function zAlert(){ 
      Dialog.alert("此为信息提示对话框");
    }
    
    function zConfirm(){ 
      Dialog.confirm('警告：您确认要删除吗？',function(){ Dialog.alert("删除成功"); });
    }
    
    /*
    function sometext(ele,n){ 
      var strArr=["背","景","文","字","1"];
      var writeStr=""

      for(i=0;i<n;i++){ 
        index=parseInt(Math.random()*5);
        for(j=0;j<5;j++){ 
          str=index+j>4?index+j-5:index+j;
          writeStr+=strArr[str];
        }
      }
      $(ele).innerHTML=writeStr;
    }
    */
</script>
</head>
<body>
<input type="button" value="弹出新窗口" onclick="zOpen()" />
<input type="button" value="弹出带说明的新窗口" onclick="zOpenD()" />
<input type="button" value="弹出信息提示对话框" onclick="zAlert()" />
<input type="button" value="弹出选择对话框" onclick="zConfirm()" />
</body>
</html>