首页 > 网络编程 > JavaScript > javascript技巧 > js 模拟信息弹出

Js的MessageBox效果代码

2008-05-16 21:48:29 作者：

看到论坛上有人模仿alert，自己也写了一个。本来想模仿winapi里的MessageBox 但可惜js 不支持，阻塞模式。

返回值只能用异步了。
支持FF、ie、opera。
DOCTYPE 可以申明，也可以不申明。

存在问题：　

在opera 里图层不能透明　
对于页面内有iframe的也无法使用
在ie里无法遮住select的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>MessageBox演示_脚本之家_www.jb51.net</title> 
<script language="javascript"> 
/*******************************************************************************************    
 * http://2lin.net 
 * Email:caoailin@gmail.com  
 * QQ:38062022  
 * Creation date: 2006-11-27  
 * 下面的内容可以拷贝到一个JS文件里面 
*********************************************************************************************/ 
// 控制按钮常量 
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; 
// 控制按钮文本 
var MB_OK_TEXT = "确定"; 
var MB_CANCEL_TEXT = "取消"; 
var MB_YES_TEXT = " 是 "; 
var MB_NO_TEXT = " 否 "; 
//提示图标 
var MB_ICON = "/upload/20080516215122799.gif"; 
//委托方法 
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"></style>' + 
            '<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>' + 
            '<div class="msgbox" style="display:none; z-index:100000;" id="msgBox">' + 
            '<div class="msgbox_title" id="msgBoxTitle"></div>' + 
            '<div class="msgbox_icon" id="msgBoxIcon"></div>' + 
            '<div class="msgbox_content" id="msgBoxContent"></div>' + 
            '<div class="msgbox_control" id="msgBoxControl"></div></div>'; 
var Timer = null; 
document.write(MB_STR); 
var icon = new Image(); 
icon.src = MB_ICON; 
/* 提示对话框 
 * 参数 1 : 提示内容 
 * 参数 2 : 提示标题 
 * 参数 3 : 图标路径 
 * 参数 4 : 按钮类型 
*/ 
function MessageBox(){ 
   var _content = arguments[0] || "这是一个对话框！"; 
   var _title   = arguments[1] || "提示"; 
   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}" id="{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;   
       
   } 
   //解决　FF 下会复位 
   ScrollTop = GetBrowserDocument().scrollTop;  
   ScrollLeft = GetBrowserDocument().scrollLeft;  
   GetBrowserDocument().style.overflow = "hidden"; 
   GetBrowserDocument().scrollTop = ScrollTop;    
   GetBrowserDocument().scrollLeft = ScrollLeft;  
       
   $("msgBoxTitle").innerHTML = _title; 
   $("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon); 
   $("msgBoxContent").innerHTML = _content;  
   $("msgBoxControl").innerHTML =  _btnStr; 
    
   OpacityValue = 0; 
   $("msgBox").style.display = "";        
   try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){}; 
   $("msgBoxMask").style.opacity = 0; 
   $("msgBoxMask").style.display = ""; 
   $("msgBoxMask").style.height = GetBrowserDocument().scrollHeight + "px"; 
   $("msgBoxMask").style.width = GetBrowserDocument().scrollWidth + "px"; 
    
   Timer = setInterval("DoAlpha()",1); 
   //设置位置    
   $("msgBox").style.width = "100%";    
   $("msgBox").style.width = ($("msgBoxIcon").offsetWidth + $("msgBoxContent").offsetWidth + 2) + "px"; 
    
   $("msgBox").style.marginTop = (-$("msgBox").offsetHeight/2 + GetBrowserDocument().scrollTop) + "px"; 
   $("msgBox").style.marginLeft = (-$("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 = document.documentElement.clientHeight; 
   var _dow = document.documentElement.offsetHeight; 
   var _bcw = document.body.clientHeight; 
   var _bow = document.body.offsetHeight; 
    
   if(_dcw == 0) return document.body; 
   if(_dcw == _dow) return document.documentElement; 
    
   if(_bcw == _bow && _dcw != 0)  
     return document.documentElement; 
   else 
     return document.body; 
} 
function SetOpacity(obj,opacity){ 
        if(opacity >=1 ) opacity = opacity / 100;     
             
        try{obj.style.opacity = opacity; }catch(e){} 
         
        try{  
            if(obj.filters){ 
                obj.filters("alpha").opacity = opacity * 100; 
            } 
             
        }catch(e){} 
} 
     
function DoAlpha(){ 
    if (OpacityValue > 20){clearInterval(Timer);return 0;} 
    OpacityValue += 5;     
    SetOpacity($("msgBoxMask"),OpacityValue); 
} 
function MBMethod(obj) 
{    
   switch(obj.id) 
   { 
      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 = "确定"; 
   MB_CANCEL_TEXT = "取消"; 
   MB_YES_TEXT = " 是 "; 
   MB_NO_TEXT = " 否 "; 
    
   $("msgBox").style.display = "none";   
   $("msgBoxMask").style.display = "none";      
   GetBrowserDocument().style.overflow = "";  
   GetBrowserDocument().scrollTop = ScrollTop; 
   GetBrowserDocument().scrollLeft = ScrollLeft;  
} 
String.prototype.toFormatString = function(){   
   var _str = this; 
   for(var i = 0; i < arguments.length; i++){     
      _str = eval("_str.replace(/\\{"+ i +"\\}/ig,'" + arguments[i] + "')"); 
   } 
   return _str; 
} 
function $(obj){ 
   return document.getElementById(obj); 
} 
/////////////////////////////////////////////////////////////////////////////////////// 
</script> 
<script language="javascript"> 
function test() 
{ 
   var _msg = "<font color=red><b>演示：</b></font>{br/}普通对话框！"; 
   MessageBox(_msg); 
} 
function test1() 
{ 
  MB_OK_METHOD = function(){alert('你按了OK');} 
  MB_YES_METHOD = function(){alert('你按了YES');} 
  MB_NO_METHOD = function(){alert('你按了NO');} 
  MB_CANCEL_METHOD = function(){alert('你按了CANCEL');}  
   
  var _msg = "<font color=red><b>演示：</b></font>{br/}调用对话框。是、否、取消"; 
  MessageBox(_msg,"演示",null,MB_YESNOCANCEL);   
} 
function test2() 
{  
  var _msg = "<font color=red><b>演示：</b></font>{br/}调用对话框。是、否、取消"; 
  MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback); 
} 
function test4() 
{  
  var _msg = "<font color=red><b>演示：</b></font>{br/}调用对话框。确定、取消"; 
  MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback); 
} 
function callback(value) 
{ 
  switch(value) 
  { 
     case MB_OK : alert('你按了OK'); break; 
     case MB_YES : alert('你按了YES'); break; 
     case MB_NO : alert('你按了NO'); break; 
     case MB_CANCEL : alert('你按了CANCEL'); break; 
   } 
} 
function test3() 
{  
  MB_YES_TEXT = "演示一"; 
  MB_NO_TEXT = "演示二"; 
  MB_CANCEL_TEXT = "演示三"; 
  var _msg = "<font color=red><b>演示：</b></font>{br/}这是自定义的对话框{br/} <font color=green>MB_YES_TEXT  MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>"; 
  MessageBox(_msg,"演示",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()">普通演示</a></td> 
    <td>　</td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td align="center"><a href="javascript:test1()">回调演示一</a> 
    <label></label></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td align="center"><a href="javascript:test2()">回调演示二 
       
    </a></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td align="center"><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td align="center"><a href="javascript:test3()">自定义演示 
       
    </a></td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Js的MessageBox效果代码

您可能感兴趣的文章: