打印

Js的MessageBox

caoailin [楼主]

流动的情感

银牌会员

帖子: 465
体力: 1789
威望: 5
离线: 108 天

1^# 大中小发表于 2006-11-27 13:12

看到论坛上有人模仿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"></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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caoailin 于 2006-11-28 11:14 编辑 ]

本帖最近评分记录

hutia 威望 +3 原创内容 2006-11-27 20:57

【烟】　抽走了我的灵魂
【妞】　泡掉了我的青春
【酒】　醉倒了我的自尊
【网】　埋葬了我的人生

TOP

做西部数码代理.Cn1元国际45元 | IT专家提醒您此帖已被关注

misshjn

中级会员

帖子: 198
体力: 364
威望: 4
离线: 21 天

2^# 大中小发表于 2006-11-27 13:22

代码很漂亮

收藏，谢谢。

------ 我的博客 ------
http://www.happyshow.org

TOP

【美橙超级G空间】688元绑定10个子目录

hutia

诘屈聱牙

荣誉管理团队

帖子: 4717
体力: 14636
威望: 383
当前: 江苏苏州
离线: 4 天

专长 JS,PHP,ASP

3^# 大中小发表于 2006-11-27 20:58

汗....打完分觉得似乎打多了....不管了.....友情顶你一下....

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

请大家尊重和保护奥运知识产权。

bmcsy

中级会员

帖子: 95
体力: 204
威望: 0
当前: 广东佛山
离线: 54 天

4^# 大中小发表于 2006-11-28 08:15

多谢楼主分享，顶一下。

活着为了什么？

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

lovelium

心飘逝

银牌会员

帖子: 1244
体力: 2145
威望: 11
当前: 广东深圳
离线: 8 天

专长 JS,C#,MSSQL

5^# 大中小发表于 2006-11-28 08:47

好帖，3分不多呢。毕竟也是很辛苦！

心飘逝 http://www.szrgb.net

TOP

wxkj8176

中级会员

帖子: 151
体力: 347
威望: 0
离线: 3 天

6^# 大中小发表于 2006-11-28 08:53

很喜欢，学习ing

TOP

caoailin [楼主]

流动的情感

银牌会员

帖子: 465
体力: 1789
威望: 5
离线: 108 天

7^# 大中小发表于 2006-11-28 09:39

引用:

原帖由 hutia 于 2006-11-27 20:58 发表
汗....打完分觉得似乎打多了....不管了.....友情顶你一下....

不多不多。　再来点我也愿意　

多谢了~~

【烟】　抽走了我的灵魂
【妞】　泡掉了我的青春
【酒】　醉倒了我的自尊
【网】　埋葬了我的人生

TOP

51yes

新手上路

帖子: 8
体力: 16
威望: 0
当前: 黑龙江哈尔滨
离线: 39 天

8^# 大中小发表于 2006-11-28 09:48

谢谢收下了

TOP

让你笑了

银牌会员

帖子: 914
体力: 2149
威望: 0
离线: 16 天

9^# 大中小发表于 2006-11-28 10:51

opera , ff 里透明图层可以用透明的PNG做背景

select 可以在messagebox下放一个iframe遮盖select

桃花运啊桃花劫...

TOP

awflasher

aw

金牌会员

帖子: 1201
体力: 2818
威望: 234
离线: 28 天

10^# 大中小发表于 2006-11-28 11:30

opera , ff 里透明图层可以用透明的PNG做背景

http://www.awflasher.com/life/
同时支持IE和FF。

AW@UE/RIA

TOP

网址兽

中级会员

帖子: 287
体力: 217
威望: 0
离线: 1 天

专长 网页设计,JS,PHP

11^# 大中小发表于 2006-11-29 17:25

这段代码什么意思?谁能给我详细解释下!

这段代码什么意思?谁能给我详细解释下!

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;
}

【成份】:本人58%的帅、40%的乖、2%微量的羞涩
【用法】:上网就去网址兽，一天三次
【警告】:长期服用会产生较严重的依赖性

TOP

mickeyboy

宝疙瘩

高级会员

帖子: 382
体力: 843
威望: 35
当前: 广东广州
离线: 2 天

专长 JS,JAVA,MySQL

12^# 大中小发表于 2006-11-30 16:51

存在的问题

存在的问题：出现提示框后，鼠标是不能点击空白了，可是tab还能用

无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

lhszwyg

中级会员

帖子: 171
体力: 438
威望: 0
离线: 178 天

13^# 大中小发表于 2006-11-30 19:16

这样的贴不顶行吗！

做人要厚道！入到很晚，但很勤奋！

TOP

fxlijun

初级会员

帖子: 58
体力: 135
威望: 0
当前: 北京海淀区
离线: 8 天

14^# 大中小发表于 2006-11-30 21:39

这个是我见过的最好的alert效果，完全没有前一些所谓的alert的弊端，还能自适应高度和宽度，还解决了兼容性问题，真是太好拉

www.wygls.com

TOP

southwolf2008

新手上路

帖子: 2
体力: 4
威望: 0
离线: 638 天

15^# 大中小发表于 2006-12-1 03:29

TOP

yqm01

高级会员

帖子: 336
体力: 655
威望: 0
离线: 39 天

16^# 大中小发表于 2006-12-1 09:44

IE7.0里没有select遮不住的问题,6.0里不行,而且我用在自己的页面上时6.0里的灰色透明不是全个IE窗口遮的,下面有半个没遮住.

Blueidea Member
www.soelin.cn

TOP

prcen

初级会员

帖子: 23
体力: 51
威望: 0
当前: 北京东城区
离线: 35 天

17^# 大中小发表于 2006-12-3 18:17

鼓励一下。
但还存在一些问题。。如果是在小窗口中打开，然后再进行最大化，就会出现提示框不能居中，遮罩层也无法覆盖整个窗口了。
希望大家能继续改进。

TOP

ling24

新手上路

帖子: 4
体力: 13
威望: 0
当前: 四川成都
离线: 98 天

18^# 大中小发表于 2008-5-13 15:17

先顶一下好东西但不知道这样在jsp页面调用........

原先我在JSP中是这样调用 alert 的
out.println("<script>alert('对不起！您之前已经购买了该商品！')</script>");

现在该怎么样调用你这个 alert 啊?我这样调用不行啊...请楼主和大家帮忙......
<script type="text/javascript" src="../js/alert.js"></script>
......
out.println("<script>test()</script>");

2006年的帖子不知道还有人答不好心人帮帮俺啊.......

TOP

jackalchan

新手上路

帖子: 5
体力: 15
威望: 0
当前: 新疆乌鲁木齐
离线: 14 天

19^# 大中小发表于 2008-5-13 16:52

不错的东西哈！

TOP

ling24

新手上路

帖子: 4
体力: 13
威望: 0
当前: 四川成都
离线: 98 天

20^# 大中小发表于 2008-5-13 17:38

ddddddddddddddd

TOP

ling24

新手上路

帖子: 4
体力: 13
威望: 0
当前: 四川成都
离线: 98 天

21^# 大中小发表于 2008-5-13 17:38

先顶一下好东西但不知道这样在jsp页面调用........
原先我在JSP中是这样调用 alert 的
out.println("<script>alert('对不起！您之前已经购买了该商品！')</script>");

现在该怎么样调用你这个 alert 啊?我这样调用不行啊...请楼主和大家帮忙......
<script type="text/javascript" src="../js/alert.js"></script>
......
out.println("<script>test()</script>");

2006年的帖子不知道还有人答不好心人帮帮俺啊.......

TOP

ling24

新手上路

帖子: 4
体力: 13
威望: 0
当前: 四川成都
离线: 98 天

22^# 大中小发表于 2008-5-13 18:34

我的问题楼主已经帮我解决了

我用 out.println("<script>test()</script>"); 不行

然后楼主告诉我用 out.println("<script defer>test()</script>"); 就OK了

楼主真是强人

TOP

heluyao

的士司机

银牌会员

帖子: 975
体力: 1625
威望: 0
当前: 广东深圳

专长 网页设计,前端制作,JS

23^# 大中小发表于 2008-5-13 19:40

支持啊！
的确不错！

我的小窝，欢迎来坐坐！

TOP

heiing

新手上路

帖子: 2
体力: 8
威望: 0
离线: 91 天

24^# 大中小发表于 2008-5-16 10:10

还有很多要改进的地方，另外，用透明GIF或PNG就可以解决遮蔽Select的问题

TOP

90box

初级会员

帖子: 58
体力: 125
威望: 0
离线: 13 天

25^# 大中小发表于 2008-5-16 12:30

不錯，好東西，搜藏了，以后用的到～

TOP

tongfan

逆流

中级会员

帖子: 138
体力: 221
威望: 0
当前: 广东深圳

26^# 大中小发表于 2008-5-16 13:13

效果不错...顶收藏

TOP

tangl198710

啸天皇帝

高级会员

帖子: 452
体力: 990
威望: 0
当前: 四川成都
离线: 1 天

专长 PHP,MySQL,MSSQL

27^# 大中小发表于 2008-5-16 13:49

如果可以拖动就更好了。

TOP

jimstory

中级会员

帖子: 110
体力: 233
威望: 0
当前: 上海徐汇

28^# 大中小发表于 2008-5-16 21:07

不错.有什么具体的应用呢?
呵呵

TOP

andylau123

新手上路

帖子: 95
体力: 0
威望: 0
离线: 83 天

29^# 大中小发表于 2008-5-17 09:10

收藏，谢谢。

TOP

xeonwell

初级会员

帖子: 64
体力: 128
威望: 0
当前: 广东深圳
离线: 1 天

专长 JS,ASP,C#

30^# 大中小发表于 2008-5-17 10:36

不错哦，楼主加油

如果能在safari里面位置显示正常就更好了

TOP

Js的MessageBox

引用:

这段代码什么意思?谁能给我详细解释下!

存在的问题

先顶一下 好东西 但不知道这样在jsp页面调用........

先顶一下好东西但不知道这样在jsp页面调用........