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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

由我心痴狂源码修改而成
[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);
   }

      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;
}

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

ASP.NET 自定义控件导出Excel发布时间：2022-07-10

ASP.NET异常：找到多个具有相同ID"xxx"的控件。FindControl要求控件具有唯 ...发布时间：2022-07-10

剪的笔顺,诠释剪的笔画,认识剪的部首

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：10208|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：6817|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：5729|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：6235|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：6079|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：6441|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：6017|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：5488|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：5874|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：5205|2022-11-06

客服电话

电子邮件

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

请发表评论

全部评论

上一篇：

下一篇：

krishnaik06/Machine-Learning-in-90-days

armancodv/building-energy-model-matlab:

美元符号为什么是“$”

CVE-2021-33465

FGRibreau/import-tweets-to-mastodon: How

剪的笔顺,诠释剪的笔画,认识剪的部首

florent37/ViewAnimator: A fluent Android

florent37/Shrine-MaterialDesign2: implem

六六分期app的软件客服如何联系？(六六分期

CVE-2020-36276

doraiso/Mastodon

关于我们

产品与服务

解决方案

139-2527-9053