• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [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);
   }


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

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
ASP.NET 自定义控件导出Excel发布时间：2022-07-10
下一篇：
ASP.NET异常：找到多个具有相同ID"xxx"的控件。FindControl要求控件具有唯 ...发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap