自定义Alert Confirm对话框[2007-09-07添加显示Progress]（需Asp.net Ajax支持）

由 我心痴狂 源码修改而成

[JavaScript]自定义MessageBox http://www.cnblogs.com/walkingboy/archive/2007/08/09/472908.html
改变：

1、去除了原有程序对prototype类库的依赖，改为依赖Asp.net Ajax支持，对使用Asp.net Ajax的人使用非常方便！

2、图片地址采用统一定义，不需要在调用方法的时候还要写图片地址。

3、修改了一部分css定义。

2007-09-07添加显示Progress

注意：需要的图片文件请到http://www.cnblogs.com/walkingboy/archive/2007/08/09/472908.html下载或者自己制作

调用方法（加载JS代码和CSS代码）

使用Alert

XingmaiMessageBox.ShowInfo("标题头","信息内容");

使用Confirm

XingmaiMessageBox.ShowConfirm("标题头","信息内容",选择“是”调用方法名,选择“否”调用方法名);

使用Pregress

XingmaiMessageBox.ShowProgress("标题头","信息内容");

(结束后调用XingmaiMessageBox.Hide();)

代码：

JS----------------------------------------------------------------------------------------------------------------

//图片地址

var imgdir = "Style/XingmaiMessageBoxImages";

XingmaiMessageBox = {

id: "XingmaiMessageBox",

name: "XingmaiMessageBox",

capiton : "消息框",

content: "提示消息",

msgbox : null,

msgcaptioninfo:null,

msgcontent:null,

msgContenttxtmsg:null,

msgbuttonyes:null,

msbbuttonno:null,

msgico:null

};

//初始化消息框

XingmaiMessageBox.init = function () {

var msgNameSpaceURI = "http://www.w3.org/1999/xhtml";

if(!msgContainerID){ var msgContainerID= "XingmaiMessageBox"; }

if(!msgCaptionID){ var msgCaptionID= "XingmaiMessageBox_caption"; }

if(!msgCaptionInfoID){var msgCaptionInfoID = "XingmaiMessageBox_caption_info";}

if(!msgContentID){ var msgContentID = "XingmaiMessageBox_content"; }

if(!msgContentTxtID){ var msgContentTxtID= "XingmaiMessageBox_content_txt"; }

if(!msgContentTxtICOID){var msgContentTxtICOID="XingmaiMessageBox_content_txt_ico"};

if(!msgContentTxtMsgID){var msgContentTxtMsgID="XingmaiMessageBox_content_txt_msg"};

if(!msgButtons){var msgButtonsID="XingmaiMessageBox_buttons"};

if(!msgButtonYes){var msgButtonYesID="XingmaiMessageBox_buttons_yes"};

if(!msgButtonNo){var msgButtonNoID="XingmaiMessageBox_buttons_no"};

if(!msgButtonOK){var msgButtonOKID="XingmaiMessageBox_buttons_ok"};

var msgContainer = $get(msgContainerID);

if(!msgContainer) {

msgContainer = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div");

msgContainer.setAttribute("id", msgContainerID);

msgContainer.setAttribute("style","MARGIN: 0px auto; POSITION: absolute; TEXT-ALIGN: center;");

var msgCaption = $get(msgCaptionID);

if(!msgCaption){

msgCaption = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaption.setAttribute("id",msgCaptionID);

msgCaption.className="caption";

var msgCaptionInfo = $get(msgCaptionInfoID);

if(!msgCaptionInfo){

msgCaptionInfo = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgCaptionInfo.setAttribute("id",msgCaptionInfoID);

msgCaptionInfo.className="info";

msgCaption.appendChild(msgCaptionInfo);

}

msgContainer.appendChild(msgCaption);

}

var msgContent = $get(msgContentID);

if(!msgContent){

msgContent= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContent.setAttribute("id",msgContentID);

msgContent.className="content";

var msgContentTxt = $get(msgContentTxtID);

if(!msgContentTxt ){

msgContentTxt = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgContentTxt.setAttribute("id",msgContentTxtID);

msgContentTxt.className="txt";

var msgContentTxtICO = $get(msgContentTxtICOID);

if(!msgContentTxtICO)

{

msgContentTxtICO= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "img") : document.createElement("img") ;

msgContentTxtICO.setAttribute("id",msgContentTxtICOID);

msgContentTxtICO.setAttribute("src","icon_alarm.gif");

msgContentTxtICO.setAttribute("align","absMiddle");

msgContentTxtICO.setAttribute("class","IcoImage");

msgContentTxt.appendChild(msgContentTxtICO);

}

var msgContentTxtMsg= $get(msgContentTxtMsgID);

if(!msgContentTxtMsg)

{

msgContentTxtMsg= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "span") : document.createElement("span") ;

msgContentTxtMsg.setAttribute("id",msgContentTxtMsgID);

msgContentTxt.className="txt";

msgContentTxt.appendChild(msgContentTxtMsg);

}

var msgButtons = $get(msgButtonsID);

if(!msgButtons)

{

msgButtons = document.createElementNS ? document.createElementNS(msgNameSpaceURI, "div") : document.createElement("div") ;

msgButtons.setAttribute("id",msgButtonsID);

msgButtons.className="btnlist"

var msgButtonNo = $get(msgButtonNoID);

if(!msgButtonNo)

{

msgButtonNo= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

msgButtonNo.setAttribute("id",msgButtonNoID);

msgButtonNo.setAttribute("type","button");

msgButtonNo.setAttribute("value","否");

msgButtonNo.className="input_set";

msgButtons.appendChild(msgButtonNo);

}

var msgButtonYes = $get(msgButtonYesID);

if(!msgButtonYes)

{

msgButtonYes= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

msgButtonYes.setAttribute("id",msgButtonYesID);

msgButtonYes.setAttribute("type","button");

msgButtonYes.setAttribute("value","是");

msgButtonYes.className="input_set";

msgButtons.appendChild(msgButtonYes);

}

var msgButtonOK= $get(msgButtonOKID);

if(!msgButtonOK)

{

msgButtonOK= document.createElementNS ? document.createElementNS(msgNameSpaceURI, "input") : document.createElement("input") ;

msgButtonOK.setAttribute("id",msgButtonOKID);

msgButtonOK.setAttribute("type","button");

msgButtonOK.setAttribute("value","确定");

msgButtonOK.className="input_set";

msgButtons.appendChild(msgButtonOK);

}

msgContentTxt.appendChild(msgButtons);

}

msgContent.appendChild(msgContentTxt);

}

msgContainer.appendChild(msgContent);

}

document.getElementsByTagName("body").item(0).appendChild(msgContainer);

}

this.msgbox = $get(this.name);

this.msgcaptioninfo = $get(msgCaptionInfoID);

this.msgContenttxtmsg= $get(msgContentTxtMsgID);

this.msgbuttonyes = $get(msgButtonYesID);

this.msgbuttonno = $get(msgButtonNoID);

this.msgbuttonok = $get(msgButtonOKID);

this.msgico = $get(msgContentTxtICOID);

this.msgbox.style.display = "none";

}

XingmaiMessageBox.ShowConfirm = function (caption,msg,YesClick,NoClick) {

if (!this.msgbox ) return;

DialogModal.Show();

this.msgcaptioninfo.innerHTML = caption;

this.msgContenttxtmsg.innerHTML = msg;

if(imgdir != "")

{

this.msgico.setAttribute("src",imgdir+"/icon_alarm.gif");

}

else

{

this.msgico.setAttribute("src","/icon_alarm.gif");

}

this.msgbox.style.display = "block";

this.msgbuttonok.style.display = "none";

this.msgbuttonyes.style.display = "block";

this.msgbuttonno.style.display = "block";

var x=0,y=0;

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

y = (document.documentElement.scrollTop || document.body.scrollTop);

var theWidth=0,theHeight=0;

if (window.innerWidth)

{

theWidth = window.innerWidth

theHeight = window.innerHeight

}

else if (document.documentElement && document.documentElement.clientWidth)

{

theWidth = document.documentElement.clientWidth

theHeight = document.documentElement.clientHeight

}

else if (document.body)

{

theWidth = document.body.clientWidth

theHeight = document.body.clientHeight

}

this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x;

this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y;

this.msgbuttonyes.onclick = YesClick;

this.msgbuttonno.onclick = NoClick;

$addHandler(this.msgbuttonyes,"click",function(){XingmaiMessageBox.Hide();});

$addHandler(this.msgbuttonno,"click",function(){XingmaiMessageBox.Hide();});

}

XingmaiMessageBox.ShowInfo = function (caption,msg) {

if (!this.msgbox ) return;

DialogModal.Show();

if(imgdir != "")

{

this.msgico.setAttribute("src",imgdir+"/icon_big_info.gif");

}

else

{

this.msgico.setAttribute("src","/icon_big_info.gif");

}

this.msgcaptioninfo.innerHTML = caption;

this.msgContenttxtmsg.innerHTML = msg;

this.msgbox.style.display = "block";

this.msgbuttonok.style.display = "block";

this.msgbuttonyes.style.display = "none";

this.msgbuttonno.style.display = "none";

var x=0,y=0;

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

y = (document.documentElement.scrollTop || document.body.scrollTop);

var theWidth=0,theHeight=0;

if (window.innerWidth)

{

theWidth = window.innerWidth

theHeight = window.innerHeight

}

else if (document.documentElement && document.documentElement.clientWidth)

{

theWidth = document.documentElement.clientWidth

theHeight = document.documentElement.clientHeight

}

else if (document.body)

{

theWidth = document.body.clientWidth

theHeight = document.body.clientHeight

}

this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x;

this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y;

$addHandler(this.msgbuttonok,"click",function(){XingmaiMessageBox.Hide();});

}

XingmaiMessageBox.ShowProgress = function (caption,msg) {

if (!this.msgbox ) return;

DialogModal.Show();

if(imgdir != "")

{

this.msgico.setAttribute("src",imgdir+"/icon_progress.gif");

}

else

{

this.msgico.setAttribute("src","/icon_progress.gif");

}

this.msgcaptioninfo.innerHTML = caption;

this.msgContenttxtmsg.innerHTML = msg;

this.msgbox.style.display = "block";

this.msgbuttonok.style.display = "none";

this.msgbuttonyes.style.display = "none";

this.msgbuttonno.style.display = "none";

var x=0,y=0;

x = (document.documentElement.scrollLeft || document.body.scrollLeft);

y = (document.documentElement.scrollTop || document.body.scrollTop);

var theWidth=0,theHeight=0;

if (window.innerWidth)

{

theWidth = window.innerWidth

theHeight = window.innerHeight

}

else if (document.documentElement && document.documentElement.clientWidth)

{

theWidth = document.documentElement.clientWidth

theHeight = document.documentElement.clientHeight

}

else if (document.body)

{

theWidth = document.body.clientWidth

theHeight = document.body.clientHeight

}

this.msgbox.style.left = (theWidth - this.msgbox.offsetWidth)/2+x;

this.msgbox.style.top = (theHeight - this.msgbox.offsetHeight)/2+y;

}

XingmaiMessageBox.Hide = function()

{

if (!this.msgbox ) return;

this.msgbox.style.display = "none";

DialogModal.Close();

$clearHandlers(this.msgbuttonyes);

$clearHandlers(this.msgbuttonno);

$clearHandlers(this.msgbuttonok);

}

function DialogModal(){

this.blankImgHandle = null;

this.tags = new Array("applet", "iframe", "select","object","embed");

}

DialogModal.Show = function()

{

var NameSpaceURI = "http://www.w3.org/1999/xhtml";

this.blankImgHandle = document.createElementNS ? document.createElementNS(NameSpaceURI, "iframe") : document.createElement("iframe") ;//iframe

this.blankImgHandle.setAttribute("id","blankImgHanldle");

with (this.blankImgHandle.style){

position = "absolute";

left = 0;

top = (document.documentElement.scrollTop || document.body.scrollTop);

height = "100%";

width = "100%";

zIndex = "9999";

filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=40)";

opacity = "0.1";

}

document.getElementsByTagName("body").item(0).appendChild(this.blankImgHandle);

}

DialogModal.Close = function(){

if (this.blankImgHandle)

{

$get(this.blankImgHandle.id).parentNode.removeChild(this.blankImgHandle);

this.blankImgHandle = null;

}

};

$addHandler(window, 'load', function(e){XingmaiMessageBox.init();});

CSS------------------------------------------------------------------------------------------------------------------------

#XingmaiMessageBox

{

margin: 0px auto;

width: 398px;

height: 150px;

font-size: 12px;

position: absolute;

z-index: 10000;

border-right: #696969 1px solid;

border-top: #696969 1px solid;

border-left: #696969 1px solid;

border-bottom: #696969 1px solid;

background-color: #ffffff;

}

#XingmaiMessageBox .caption

{

font-family: Arial, 宋体;

font-size: 12px;

background: url(XingmaiMessageBoxImages/alter_bar.gif) dimgray no-repeat;

height: 28px;

text-align: left;

color: #ffff00;

font-weight: bold;

}

#XingmaiMessageBox .info

{

font-family: Arial, 宋体;

float: left;

color: #ff9900;

font-weight: bold;

margin: 0px;

font-size: 12px;

padding-right: 0px;

padding-left: 8px;

padding-bottom: 0px;

padding-top: 8px;

}

#XingmaiMessageBox .content

{

font-family: Arial, 宋体;

font-size: 12px;

width: 396px;

word-break: break-all;

border: 1px solid #fff;

color: #696969;

background-color: #ffffff;

}

#XingmaiMessageBox .txt

{

text-align: left;

color: #696969;

line-height: 22px;

font-size: 12px;

padding-right: 16px;

padding-left: 16px;

padding-bottom: 16px;

padding-top: 16px;

}

#XingmaiMessageBox .IcoImage

{

}

#XingmaiMessageBox .btnlist

{

text-align: center;

padding-bottom: 16px;

padding-top: 16px;

}

#XingmaiMessageBox .input_set

{

font-size: 12px;

width: 60px;

height: 22px;

border-right: darkgray 1px solid;

border-top: darkgray 1px solid;

border-left: darkgray 1px solid;

border-bottom: darkgray 1px solid;

background-color: #f8f8ff;

margin-left: 6px;

margin-right: 6px;

float: right;

}