重写Alert Confirm 弹出样式

asir007

http://e2talentbrian.blog.163.com/blog/static/105486710200953071748235/ /**************************************************js******************************************************************************/ var oldTop = 0, oldLeft = 0; var oldEventX = 0, oldEventY = 0; var ShadeArea; var WinArea; var canmove = false; var url = this.location.host; 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'>" + _alertTitle + "</div>";     strAlert += "          <div class='message_close'><a href='#'><img  id='closeButton'  style='cursor:pointer;' src='http://" + url + "/Images/_system_image/cancel.png' alt='Close' title='Close' width='16px' height='16px' /></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'> </td>";     strAlert += "      </tr>";     strAlert += "      <tr>";     strAlert += "        <td class='message_leftcontain'><img src='http://" + url + "/Images/_system_image/icon-info.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='20'> </td>";     strAlert += "      </tr>";     strAlert += "      <tr>";     strAlert += "        <td colspan='2' class='message_button' height='25px'><input  id='alertButton'  class='Form-InputButton' type='button' name='btnOk' value='" + _alertbuttonText + "'/></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") +); 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;     } }     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;                    }     }         (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 isConfirmDivBuilded = false;     function BuildConfirmDiv(){         var strConfirm = "";                 strConfirm += "<div id='ConfirmDiv' style='position:absolute;display:none;z-index:1002; display:none;'>";         strConfirm +="  <div class='message_width' onmousedown='BeginDrag(this)' onmouseup='EndDrag(this)' onmousemove='Draging(this)'>";         strConfirm +="    <table class='message_title'>";         strConfirm +="      <tr>";         strConfirm += "        <td><div class='message_div'>" + _confirmTitle + "</div>";         strConfirm += "          <div class='message_close'><a href='#'><img  id='confirmCloseButton'  style='cursor:pointer;' src='http://" + url + "/Images/_system_image/cancel.png' alt='Close' title='Close' width='40' height='40' /></a></div></td>";         strConfirm +="      </tr>";         strConfirm +="    </table>";         strConfirm +="  </div>";         strConfirm +="  <div class='message_width'>";         strConfirm +="    <table class='message_contain' cellpadding='0' cellspacing='0'>";         strConfirm +="      <tr>";         strConfirm +="        <td colspan='2' height='25'> </td>";         strConfirm +="      </tr>";         strConfirm +="      <tr>";         strConfirm += "        <td class='message_leftcontain'><img src='http://" + url + "/Images/_system_image/icon-question.gif' alt='Query' title='Query' width='40' height='40' /></td>";         strConfirm +="        <td class='message_rightcontain'><div id='confirmMessageDiv'>";         strConfirm +="                </div>";         strConfirm +="      </tr>";         strConfirm +="      <tr>";         strConfirm +="        <td colspan='2' height='35'> </td>";         strConfirm +="      </tr>";         strConfirm +="      <tr>";         strConfirm += "        <td colspan='2' class='message_button'><input  id='confirmOKButton'  style='margin-right:20px;' class='Form-InputButton' type='button' name='btnOk' value='" + _confirmButtonText + "'/><input  id='confirmCancelButton'  class='Form-InputButton' type='button' name='btnOk' value='" + _CancelButtonText + "'/></td>";         strConfirm +="      </tr>";         strConfirm +="    </table>";         strConfirm +="  </div>";                   strConfirm +="</div>";         strConfirm +="<div style='position:absolute;  z-index:1001;  display:none;'></div>";                 document.body.insertAdjacentHTML("afterBegin",strConfirm);                 isConfirmDivBuilded = true;   }     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));     window.confirm = function(message, okCallBack, cancelCallBack) {         if (isConfirmDivBuilded == false) {             BuildConfirmDiv();         }         var shadeObj = ShadeFactory.get_Instance("#FFFFFF", 0, 1000);         shadeObj.Show();         var confirmDiv = document.getElementById("ConfirmDiv");         confirmDiv.style.display = "";         confirmDiv.style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - parseInt(confirmDiv.offsetHeight)) / 2 + "px";         confirmDiv.style.left = document.documentElement.scrollLeft + (document.documentElement.clientWidth - parseInt(confirmDiv.offsetWidth)) / 2 + "px";         var confirmMessageDiv = document.getElementById("confirmMessageDiv");         confirmMessageDiv.innerHTML = message;         var confirmOKButton = document.getElementById("confirmOKButton");         confirmOKButton.focus();         var confirmCancelButton = document.getElementById("confirmCancelButton");         var confirmCloseButton = document.getElementById("confirmCloseButton");         confirmCloseButton.onclick = confirmCancelButton.onclick = function() {             shadeObj.Hidden();             document.getElementById("ConfirmDiv").style.display = "none";             if (cancelCallBack != null && cancelCallBack != "") {                 eval(cancelCallBack);             }         }         confirmOKButton.onclick = function() {             shadeObj.Hidden();             document.getElementById("ConfirmDiv").style.display = "none";             if (okCallBack != null && okCallBack != "") {                 eval(okCallBack);             }             document.forms(0).submit();             return true;         }         return false;     } /************************************************************js********************************************************************/ /************************************************************css********************************************************************/ .message_width{ width: 420px; color: #31415A; } .message_title { width: 420px; background-image:url('images/mso-hd.gif'); background-repeat:repeat-x; 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: 16px; height: 16px; } .message_close a { height:16px; width:16px; } .message_close a:hover { } .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; height:40px } .message_leftcontain { width: 100px; text-align: right; vertical-align: top; } .message_rightcontain { word-break:break-all; padding: 0px 45px; } .message_button {     text-align: center;     width: 420px;     background-color: #E1EFFF;     border-bottom: 0px; } .list { margin: 0px 20px 0px 5px; padding: 0px 3px 0px 3px; line-height: 20px;     border: 1px solid #AABACA; font-size: 12px; }