Js的MessageBox效果代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Js的MessageBox效果代码

技术文章搜索

关键字

Javascript 中的 Js的MessageBox效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 224 ::

收藏到网摘: n/a

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容) 页面下沉抖动效果-网站HTTP连接没有效果-PC上有效果

看到论坛上有人模仿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演示_软晨学习网_www.ruanchen.com</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 = "/upload/tech/20091012/20091012091805_7a614fd06c325499f1680b9896beedeb.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) + " " + _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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript四个方向无间隙滚动合集(多浏览器IE,firefox兼容) 页面下沉抖动效果-网站HTTP连接没有效果-PC上有效果

Javascript 中的 Js的MessageBox效果代码

评论 (0) All