Js的MessageBox


Posted in Javascript onDecember 03, 2006

看到论坛上有人模仿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演示</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 = "http://2lin.net/image/information.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"><!--' + 
            '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 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) + "  " + 
                      _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);  
           break; 
      case MB_YESNO       : 
            _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " + 
                      _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);  
            break; 
      case MB_YESNOCANCEL : 
            _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " + 
                      _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) + "  " + 
                      _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> </td> 
    <td align="center"><a href="javascript:test1()">回调演示一</a> 
    <label></label></td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td> </td> 
    <td align="center"><a href="javascript:test2()">回调演示二 
    </a></td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td> </td> 
    <td align="center"><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a></td> 
    <td> </td> 
  </tr> 
  <tr> 
    <td> </td> 
    <td align="center"><a href="javascript:test3()">自定义演示 
    </a></td> 
    <td> </td> 
  </tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
处理canvas绘制图片模糊问题
May 11 Javascript
硬盘浏览程序,保存成网页格式便可使用
Dec 03 #Javascript
常用js脚本
Dec 03 #Javascript
论坛特效代码收集(落伍转发-不错)
Dec 02 #Javascript
线路分流自动跳转代码;希望对大家有用!
Dec 02 #Javascript
phpwind放自动注册方法
Dec 02 #Javascript
一段好玩的JavaScript代码
Dec 01 #Javascript
[原创]网络复制内容时常用的正则+editplus
Nov 30 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php实现网站插件机制的方法
2009/11/10 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
require.js中的define函数详解
2017/07/10 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
安卓程序员求职信
2014/02/28 职场文书
财务简历的自我评价
2014/03/05 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
批评与自我批评范文
2014/10/15 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫