SoFunction
Updated on 2025-04-03

Js' MessageBox


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MessageBox Demo</title>
<script language="javascript">
/*******************************************************************************************   
 * 
 * Email:caoailin@ 
 * QQ:38062022 
 * Creation date: 2006-11-27 
* The following content can be copied into a JS file
*********************************************************************************************/


// Control button constant
var MB_OK = 0;
var MB_CANCEL = 1;
var MB_OKCANCEL = 2;
var MB_YES = 3;
var MB_NO = 4;
var MB_YESNO = 5;
var MB_YESNOCANCEL = 6;

// Control button text
var MB_OK_TEXT = "OK";
var MB_CANCEL_TEXT = "Cancel";
var MB_YES_TEXT = " Yes";
var MB_NO_TEXT = " No";

// Prompt icon
var MB_ICON = "/image/";


//Delegate method
var MB_OK_METHOD = null;
var MB_CANCEL_METHOD = null;
var MB_YES_METHOD = null;
var MB_NO_METHOD = null;
var MB_BACKCALL = null;

var MB_STR = '<style type="text/css"><!--' +
            'body{margin:0px;}' +
            '.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}' +
            '.msgbox_control{text-align:center;clear:both;height:28px;}' +
            '.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}' +
            '.msgbox_content{padding:10px;float:left;line-height: 20px;}' +
            '.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}' +
            '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' +
            '.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}' +
            '--></style>' +
            '<div  class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>' +
            '<div class="msgbox" style="display:none; z-index:100000;" >' +
            '<div class="msgbox_title" ></div>' +
            '<div class="msgbox_icon" ></div>' +
            '<div class="msgbox_content" ></div>' +
            '<div class="msgbox_control" ></div></div>';

var Timer = null;

(MB_STR);
var icon = new Image();
 = MB_ICON;

/* Prompt dialog
* Parameter 1: Prompt content
* Parameter 2: Title
* Parameter 3: Icon path
* Parameter 4: Button type
*/

function MessageBox(){
var _content = arguments[0] || "This is a dialog box!";
var _title  = arguments[1] || "Tip";
   var _icon    = arguments[2] || MB_ICON;
   var _button  = arguments[3] || MB_OK;
   MB_BACKCALL  = arguments[4];

   var _iconStr = '<img src="{0}">';
   var _btnStr  = '<input name="{0}"  type="button" class="msgbox_button" value="{1}" onclick="MBMethod(this)" />';

   
   switch(_button)
   {      
      case MB_CANCEL      : _btnStr = _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break;

      case MB_YES         : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;

      case MB_NO          : _btnStr = _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break;

      case MB_OKCANCEL    : 
           _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT) + "&nbsp;&nbsp;" +
                      _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); 
           break;

      case MB_YESNO       :
            _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "&nbsp;&nbsp;" +
                      _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); 
            break;

      case MB_YESNOCANCEL :
            _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "&nbsp;&nbsp;" +
                      _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) + "&nbsp;&nbsp;" +
                      _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); 
            break;

      default :  _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT);  break;  

   }
//Solution: FF will reset
   ScrollTop = GetBrowserDocument().scrollTop; 
   ScrollLeft = GetBrowserDocument().scrollLeft; 
   GetBrowserDocument(). = "hidden";
   GetBrowserDocument().scrollTop = ScrollTop;   
   GetBrowserDocument().scrollLeft = ScrollLeft; 

   $("msgBoxTitle").innerHTML = _title;
   $("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon);
   $("msgBoxContent").innerHTML = _content; 
   $("msgBoxControl").innerHTML =  _btnStr;

   OpacityValue = 0;
   $("msgBox"). = "";       
   try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){};
   $("msgBoxMask"). = 0;
   $("msgBoxMask"). = "";
   $("msgBoxMask"). = GetBrowserDocument().scrollHeight + "px";
   $("msgBoxMask"). = GetBrowserDocument().scrollWidth + "px";

   Timer = setInterval("DoAlpha()",1);
//Set the location
   $("msgBox"). = "100%";   
   $("msgBox"). = ($("msgBoxIcon").offsetWidth + $("msgBoxContent").offsetWidth + 2) + "px";

   $("msgBox"). = (-$("msgBox").offsetHeight/2 + GetBrowserDocument().scrollTop) + "px";
   $("msgBox"). = (-$("msgBox").offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px";   

   if(_button == MB_OK || _button == MB_OKCANCEL){
     $("msgBoxBtnOk").focus();
   }else if(_button == MB_YES || _button == MB_YESNO || _button == MB_YESNOCANCEL){
       $("msgBoxBtnYes").focus();
   }  

}

var OpacityValue = 0;
var ScrollTop = 0;
var ScrollLeft = 0;

function GetBrowserDocument()
{
   var _dcw = ;
   var _dow = ;
   var _bcw = ;
   var _bow = ;

   if(_dcw == 0) return ;
   if(_dcw == _dow) return ;

   if(_bcw == _bow && _dcw != 0) 
     return ;
   else
     return ;
}

function SetOpacity(obj,opacity){
        if(opacity >=1 ) opacity = opacity / 100;    

        try{ = opacity; }catch(e){}

        try{ 
            if(){
                ("alpha").opacity = opacity * 100;
            }

        }catch(e){}
}

function DoAlpha(){
    if (OpacityValue > 20){clearInterval(Timer);return 0;}
    OpacityValue += 5;    
    SetOpacity($("msgBoxMask"),OpacityValue);
}

function MBMethod(obj)
{   
   switch()
   {
      case "msgBoxBtnOk" : if(MB_BACKCALL) {MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD) MB_OK_METHOD();} break;
      case "msgBoxBtnCancel" : if(MB_BACKCALL) {MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD) MB_CANCEL_METHOD();} break;
      case "msgBoxBtnYes" : if(MB_BACKCALL) {MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD) MB_YES_METHOD();} break;
      case "msgBoxBtnNo" : if(MB_BACKCALL) {MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD) MB_NO_METHOD();} break;
   }   

   MB_OK_METHOD = null;
   MB_CANCEL_METHOD = null;
   MB_YES_METHOD = null;
   MB_NO_METHOD = null;
   MB_BACKCALL = null;

MB_OK_TEXT = "OK";
MB_CANCEL_TEXT = "Cancel";
MB_YES_TEXT = "Yes";
MB_NO_TEXT = " No";

   $("msgBox"). = "none";  
   $("msgBoxMask"). = "none";     
   GetBrowserDocument(). = ""; 
   GetBrowserDocument().scrollTop = ScrollTop;
   GetBrowserDocument().scrollLeft = ScrollLeft; 
}

 = function(){  
   var _str = this;
   for(var i = 0; i < ; i++){    
      _str = eval("_str.replace(/\\{"+ i +"\\}/ig,'" + arguments[i] + "')");
   }
   return _str;
}

function $(obj){
   return (obj);
}
///////////////////////////////////////////////////////////////////////////////////////
</script>
<script language="javascript">
function test()
{
var _msg = "<font color=red><b>Demo:</b></font><br/>Normal dialog box!";
   MessageBox(_msg);
}

function test1()
{
MB_OK_METHOD = function(){alert('You press OK');}
MB_YES_METHOD = function(){alert('You pressed YES');}
MB_NO_METHOD = function(){alert('You press NO');}
MB_CANCEL_METHOD = function(){alert('You pressed CANCEL');}

var _msg = "<font color=red><b>Demo:</b></font><br/>Call the dialog box. Yes, No, Cancel";
MessageBox(_msg,"demo",null,MB_YESNOCANCEL);
}

function test2()

var _msg = "<font color=red><b>Demo:</b></font><br/>Call the dialog box. Yes, No, Cancel";
MessageBox(_msg,"Demo", MB_ICON, MB_YESNOCANCEL, callback);
}

function test4()

var _msg = "<font color=red><b>Demo:</b></font><br/>Call the dialog box. OK, Cancel";
MessageBox(_msg,"Demo", MB_ICON, MB_OKCANCEL, callback);
}

function callback(value)
{
  switch(value)
  {
case MB_OK : alert('You press OK'); break;
case MB_YES : alert('You pressed YES'); break;
case MB_NO : alert('You press NO'); break;
case MB_CANCEL : alert('You pressed CANCEL'); break;
   }
}

function test3()

MB_YES_TEXT = "Demo 1";
MB_NO_TEXT = "Demo 2";
MB_CANCEL_TEXT = "Demo Three";
var _msg = "<font color=red><b>Demo:</b></font><br/>This is a custom dialog box<br/> <font color=green>MB_YES_TEXT MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>";
MessageBox(_msg,"Demo", MB_ICON, MB_YESNOCANCEL, callback);
}

</script>
</head>

<body>
<table width="1500" height="1000" border="1" bordercolor="#000000">
  <tr>
    <td> </td>
<td align="center"><a href="javascript:test()">General Demo</a></td>
    <td> </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
<td align="center"><a href="javascript:test1()">Callback Demo 1</a>
    <label></label></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
<td align="center"><a href="javascript:test2()">Callback Demo Two

    </a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
<td align="center"><a href="javascript:test4()">Callback Demo Three</a><a href="javascript:test3()"></a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
<td align="center"><a href="javascript:test3()">Custom Demo

    </a></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>