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实现图片上传并正常显示
这篇文章主要介绍了js实现图片上传并正常显示，我们经常遇到上传照片的情况，如何实现图片上传，本文为大家进行揭晓，感兴趣的小伙伴们可以参考一下
2015-12-12
JavaScript基础之运算符与表达式详解
这篇文章主要为大家详细介绍了JavaScript中一些常见的运算符与表达式的具体使用，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下
2023-04-04
ES6学习之变量的两种命名方法示例
最近在学习ES，所以想着将自己学习的一些经验技巧总结一下，方便学习，所以下面这篇文章主要跟大家分享介绍了关于ES6学习之变量的两种命名方法，文中通过示例代码介绍的很详细，需要的朋友们下面来一起看看吧。
2017-07-07
javascript实现一个数值加法函数
这篇文章主要介绍了javascript实现一个数值加法函数，十分的简单实用，方便大家理解javascript，有需要的小伙伴可以参考下。
2015-06-06
微前端qiankun沙箱实现源码解读
这篇文章主要为大家介绍了微前端qiankun沙箱实现的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
JavaScript函数之call、apply以及bind方法案例详解
这篇文章主要介绍了JavaScript函数之call、apply以及bind方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
js实现百度登录窗口拖拽效果
这篇文章主要为大家详细介绍了js实现百度登录窗口拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
js onload事件不起作用示例分析
jsp页面中写一个onload事件，发现居然不起作用，查看源文件，bady的onload后居然没有方法名，下面是具体的试验过程，感兴趣的朋友可以参考下
2013-10-10
在webstorm中配置less的方法详解
这篇文章主要介绍了在webstorm中配置less的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-09-09
js获取url中"?"后面的字串方法
这篇文章主要介绍了js如何获取url中"?"后面的字串,需要的朋友可以参考下
2014-05-05

Js的MessageBox效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具