管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Js的MessageBox

　　看到论坛上有人模仿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:[email protected]

　　* 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>

教程首页 更多教程