【转】window.open重写实现友好的对话框

http://www.cnblogs.com/Charles2008/archive/2008/04/18/1158012.html


test alert
JS部分

 var oldTop=0,oldLeft=0;
    var oldEventX = 0,oldEventY = 0;
    var ShadeArea;
    var WinArea;
    var canmove=false;
    
    var hover='#000000',normal='#000000';
    
    function BeginDrag(obj){
        if(event.button==1)
        {
            WinArea = obj.parentNode;
            ShadeArea = WinArea.nextSibling;
            
            obj.setCapture();

            oldEventX = event.clientX;
            oldEventY = event.clientY;
            
            oldLeft = parseInt(WinArea.style.left);
            oldTop = parseInt(WinArea.style.top);
            
            ShadeArea.style.width = WinArea.offsetWidth;
            ShadeArea.style.height = WinArea.offsetHeight;
            
            ShadeArea.style.display = "";
            ShadeArea.style.left = oldLeft +5;
            ShadeArea.style.top = oldTop + 5;
            ShadeArea.style.backgroundColor = normal;
            ShadeArea.style.filter = "alpha(opacity=40)";
            canmove = true;
        }
    }
    function EndDrag(obj){
        
        if(canmove)
        {
            ShadeArea.style.display = "none";
            ShadeArea.style.left = oldLeft;
            ShadeArea.style.top = oldTop;
             
            obj.releaseCapture();
            canmove = false;
        }
    }
    function Draging(obj){
        if(canmove){
        
            WinArea.style.left = oldLeft + event.clientX - oldEventX;
            WinArea.style.top = oldTop + event.clientY - oldEventY;
            
            ShadeArea.style.left = parseInt(WinArea.style.left) + 5;
            ShadeArea.style.top = parseInt(WinArea.style.top) + 5;
           
        }
    }
    var isAlertDivBuilded = false;
    function BuildAlertDiv(){
        var strAlert = "";        
        strAlert += "<div id='AlertDiv' style='position:absolute;display:none;z-index:1002; display:none;'>";
        strAlert +="  <div class='message_width' onmousedown='BeginDrag(this)' onmouseup='EndDrag(this)' onmousemove='Draging(this)'>";
        strAlert +="    <table class='message_title'>";
        strAlert +="      <tr>";
        strAlert +="        <td><div class='message_div'>Information</div>";
        strAlert +="          <div class='message_close'><a href='#'><img  id='closeButton'  style='cursor:pointer;' src='http://www.cnblogs.com/images/cnblogs_com/charles2008/close.gif' alt='Close' title='Close' width='40' height='40' /></a></div></td>";
        strAlert +="      </tr>";
        strAlert +="    </table>";
        strAlert +="  </div>";
        strAlert +="  <div class='message_width'>";
        strAlert +="    <table class='message_contain' cellpadding='0' cellspacing='0'>";
        strAlert +="      <tr>";
        strAlert +="        <td colspan='2' height='25'>&nbsp;</td>";
        strAlert +="      </tr>";
        strAlert +="      <tr>";
        strAlert +="        <td class='message_leftcontain'><img src='http://www.cnblogs.com/images/cnblogs_com/charles2008/information.gif' alt='Information' title='Information' width='40' height='40' /></td>";
        strAlert +="        <td class='message_rightcontain'><div id='alertMessageDiv'>";
        strAlert +="                </div>";
        strAlert +="      </tr>";
        strAlert +="      <tr>";
        strAlert +="        <td colspan='2' height='35'>&nbsp;</td>";
        strAlert +="      </tr>";
        strAlert +="      <tr>";
        strAlert +="        <td colspan='2' class='message_button'><input  id='alertButton'  class='button_short' type='button' name='btnOk' value='OK'/></td>";
        strAlert +="      </tr>";
        strAlert +="    </table>";
        strAlert +="  </div>";          
        strAlert +="</div>";
        strAlert +="<div style='position:absolute;  z-index:1001;  display:none;'></div>";        
        document.body.insertAdjacentHTML("afterBegin",strAlert);
        
       isAlertDivBuilded = true; 
    }
     
      (function(){
        SelectsFactory = {
            get_Instance:function(){
                if(Selects.instance == null){
                    return new Selects();
                }
                else{
                    return Selects.instance;
                }
            }
        }
        var Selects = function(){
            this.BuildInput = function(select){
                var textbox = document.createElement("INPUT");
                if(select.options != null  && select.selectedIndex >=0 ){
                    textbox.value = select.options[select.selectedIndex].text;
                }
                textbox.style.width = select.offsetWidth;
                textbox.display = 'none';
                var className = select.className;
                if(className!=null){
                    className = className.toLowerCase();
                    if(className == 'select_norrow'){
                        textbox.className = 'input_narrow';
                    }
                    else{
                        textbox.className = 'input';
                    }
                }
                else{
                    textbox.className = 'input';
                }
                select.insertAdjacentElement("beforeBegin",textbox);
            }       
            this.HiddenSelect =function(){
                var arrSelect = document.getElementsByTagName("SELECT");
                for(var i=0;i<arrSelect.length;i++){
                    var select = arrSelect[i]; 
                    if(select.previousSibling == null){
                       this.BuildInput(select); 
                    }
                    select.style.display = "none";
                    try
                    {
                        select.previousSibling.style.display = "";
                    }catch(ex){}
                }
            }
            
            this.ShowSelect = function(){
                var arrSelect = document.getElementsByTagName("SELECT");
                for(var i=0;i<arrSelect.length;i++){
                    var select = arrSelect[i];
                    if(select.previousSibling == null){
                       this.BuildInput(select); 
                    }
                    select.style.display = "";
                    try
                    {
                        select.previousSibling.style.display = "none";
                    }catch(ex){}
                }
            }
            Selects.instance = this;
        }
    })();
     
     
     
        (function(){
        ShadeFactory = {
            get_Instance:function(backgroundColor,alpha,zindex){
                if(Shade.instance == null){
                    return new Shade(backgroundColor,alpha,zindex);
                }
                else{
                    if(backgroundColor != null){
                        Shade.instance.ShadeDiv.style.backgroundColor = backgroundColor;
                    }
                    else{
                        Shade.instance.ShadeDiv.style.backgroundColor = "#FFFFFF";
                    }
                    if(alpha != null){
                        Shade.instance.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
                    }
                    else{
                       Shade.instance.ShadeDiv.style.filter = "alpha(opacity=20)"; 
                    }
                    if(zindex != null){
                        Shade.instance.ShadeDiv.style.zIndex = zindex;
                    }
                    else{
                        Shade.instance.ShadeDiv.style.zIndex = 1;
                    }
                    return Shade.instance;
                }
            }
        }
        var Shade = function(backgroundColor,alpha,zindex){
            
            Shade.instance = this;
            this.referenceCount = 0; 
            this.ShadeDiv = document.createElement("DIV");
            if(backgroundColor != null){
                this.ShadeDiv.style.backgroundColor = backgroundColor;
            }
            else{
                this.ShadeDiv.style.backgroundColor = "#FFFFFF";
            }
            if(alpha != null){
                this.ShadeDiv.style.filter = "alpha(opacity="+alpha+")";
            }
            else{
               this.ShadeDiv.style.filter = "alpha(opacity=20)"; 
            }
            if(zindex != null){
                this.ShadeDiv.style.zIndex = zindex;
            }
            else{
                this.ShadeDiv.style.zIndex = 1;
            }
            this.ShadeDiv.style.display = "none";
            this.ShadeDiv.style.position = "absolute";
            document.body.insertAdjacentElement("afterBegin",this.ShadeDiv);
            
            this.selectsObj = SelectsFactory.get_Instance();
            this.Show = function(){
                this.referenceCount = this.referenceCount + 1 ;
                this.ShadeDiv.style.display="";
                this.ShadeDiv.style.left =  this.ShadeDiv.style.top = 0;
                this.ShadeDiv.style.width = document.documentElement.offsetWidth;
                this.ShadeDiv.style.height = document.documentElement.offsetHeight;
                if(isIE && version<7){
                    this.selectsObj.HiddenSelect();
                }
            }
            this.Hidden = function(){
                 this.referenceCount = this.referenceCount - 1 ;
                 if(this.referenceCount <= 0){
                     this.ShadeDiv.style.display="none";
                     this.ShadeDiv.style.left =  this.ShadeDiv.style.top = 0;
                     this.ShadeDiv.style.width = 0;
                     this.ShadeDiv.style.height = 0 ;
                     this.ShadeDiv.style.backgroundColor = "";
                     this.ShadeDiv.style.filter = "";
                     if(isIE && version<7){
                        this.selectsObj.ShowSelect();
                     } 
                 }
            }             
       }    
    })();
    
    var isIE =  navigator.appName.indexOf("Internet Explorer")!= -1;
    var strVersion = navigator.appVersion.toString();
    var version =parseInt(strVersion.substring(strVersion.indexOf("MSIE")+4,strVersion.indexOf("MSIE")+8));
    var arrMessages = [];
    var arrCallBacks = [];
    var oldFocus = null;
    var oldAlert = window.alert;
      window.alert = function(message,callBack)
      {
            if(!isIE){
                oldAlert(message);
                eval(callBack);
                return;
            }
            if(isAlertDivBuilded == false){
                BuildAlertDiv();
            }
             var shadeObj = ShadeFactory.get_Instance("#FFFFFF",0,1000);
             if(arrMessages.length <=0){
                  shadeObj.Show();
             }
            var alertButton = document.getElementById("alertButton");
            var closeButton = document.getElementById("closeButton");
            
            function ShowAlertDiv(message){
                 var alertMessageDiv= document.getElementById("alertMessageDiv");
                alertMessageDiv.innerHTML = message; 
                var alertDiv = document.getElementById("AlertDiv");
                alertDiv.style.display = "";
                alertDiv.style.top = document.documentElement.scrollTop + ( document.documentElement.clientHeight - parseInt(alertDiv.offsetHeight))/2 + "px";
                alertDiv.style.left = document.documentElement.scrollLeft +(  document.documentElement.clientWidth - parseInt(alertDiv.offsetWidth))/2 + "px";
                alertButton.focus();  
            } 
        
             if(arrMessages.length <=0){
                oldFocus = document.activeElement;
                ShowAlertDiv(message);
            }
            arrMessages.push(message);
            arrCallBacks.push(callBack);
        
            function HiddenAlertDiv(){
                 arrMessages.shift();
                  if(arrCallBacks.length > 0 && arrCallBacks[0] != null){
                       eval(arrCallBacks[0]);
                       arrCallBacks.shift();
                   }
                   if(arrMessages.length > 0){
                        ShowAlertDiv(arrMessages[0]);
                        return;
                   }
                   else{
                        if(oldFocus != null && oldFocus.disabled == false){
                            oldFocus.focus();
                        }
                     } 
                   shadeObj.Hidden();
                   document.getElementById("AlertDiv").style.display="none";
                }
                 if(document.addEventListener){ 
                        closeButton.addEventListener("click",HiddenAlertDiv,false);
                        alertButton.addEventListener("click",HiddenAlertDiv,false);
                 }
                 else{
                        closeButton.onclick = alertButton.onclick = HiddenAlertDiv;
                 }     
           }

CSS部分

/**//*---------------以下信息提示框样式-------------------*/
.message_width{}{
    width: 420px;
    color: #31415A;
} 
.message_title {}{
    width: 420px;
    background-color: #DEEAF4;
    border-top: solid 1px #8F8F8F;
    border-left: solid 1px #8F8F8F;
    border-right: solid 1px #8F8F8F;
    border-bottom: 0px;
}
.message_div {}{
    float: left;
    font-weight: bold;
    padding-top: 6px;
    padding-left: 10px;
}
.message_close {}{
    float: right;
    padding: 9px;
    height: 8px;
    width: 8px;
}
.message_close img {}{
    border: 0px;
    width: 8px;
    height: 8px;
}
.message_close a {}{
    background: url(../Image/close.gif) no-repeat; 
}
.message_close a:hover {}{
    background: url(../Image/close_mouseon.gif) no-repeat; 
}
.message_contain {}{
    width: 420px;
    border-top: 0px;
    border-left: solid 1px #8F8F8F;
    border-right: solid 1px #8F8F8F;
    border-bottom: solid 1px #8F8F8F;
    background-color: #FFFFFF;
}
.message_leftcontain {}{
    width: 100px;
    text-align: right;
    vertical-align: top;
}
.message_rightcontain 
{}{
    word-break:break-all;
    padding: 0px 45px;
}
.message_button {}{
    text-align:center;
    padding: 10px;
} 
.list {}{
    margin: 0px 20px 0px 5px;
    padding: 0px 3px 0px 3px;
    line-height: 20px;
    border: 1px solid #AABACA;
    font-size: 12px;
}