首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

Js的MessageBox

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript编程起步（第七课）
Jan 10 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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
反向代理(2) 443(1) 默认端口(3) shell(3) 前后端分离(1) 压力测试(1) 生成缩略图(1) 防盗链(1) reload(1) 二级域名(1)
You might like
php侧拉菜单 漂亮，可以向右或者向左展开，支持FF，IE
2009/10/15 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解JavaScript 为什么要有 Symbol 类型？
2019/04/03 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python实现五子棋小游戏
2020/03/25 Python
Python调用C语言的实现
2019/07/26 Python
新加坡最佳婴儿用品店：Mamahood.com.sg
2018/08/26 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
化工专业自荐书
2014/06/16 职场文书
社保转移委托书范本
2014/10/08 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python