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 相关文章推荐
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
BootStrap中的表单大全
Sep 07 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
小程序实现横向滑动日历效果
Oct 21 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
ES6入门教程之Array.from()方法
2019/03/23 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python中update的基本使用方法详解
2019/07/17 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python如何查看网页代码
2020/06/07 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
公司会计主管岗位责任制
2014/03/01 职场文书
美容院营销方案
2014/03/05 职场文书
关于读书的演讲稿
2014/05/07 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript