好长时间不写笔记了,这段时间就是乱忙,忙看书,忙上课,还忙着玩。只是老师有任务才慢忽悠悠的查一些东西,真的堕落了吗……哎。进入正题……
今天淘到一段不错的代码,是用js模拟弹出系统对话框的。
出现的问题:为什么要模拟这个对话框,主要是因为做的系统是给老外用的,要求一切显示都是英语。在网上查到,其实js里面的conform弹出对话框中显示的“确定”和“取消”按钮,是根据电脑的系统来设置的,所以,这样的话,肯定有的地方显示成中文,有的地方显示英文,不合要求。
在网上查了好多,也有很多的组件,但是,仅仅这么一个小的功能,用一个组件有点浪费了。后来找到了一个好的。功能实现很齐全,根据自己的需要改了一下。其中的代码,我还是放上最初的吧。
下面的代码,我已经测试过了,直接放在一个html中可以运行的。
- <!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
- * 下面的内容可以拷贝到一个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 = "submit";
- var MB_CANCEL_TEXT = "cancel";
- var MB_YES_TEXT = " yes ";
- var MB_NO_TEXT = "no ";
- //提示图标
- 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}" οnclick="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;//或者点击跳转到另一个页面:location.href="http://www.baidu.com";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="1000" align="center" 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>
- <div align="center"><input name="" value="自定义演示" type="button" οnclick="test3()" /></div>
- </body>
- </html>