js模拟弹出系统对话框

bulote

浏览: 1305626 次

最近访客更多访客>>

u012363178

songhait

chk141

sharpbai

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1272)

社区版块

存档分类

2012-02 ( 25)
2012-01 ( 145)
2011-12 ( 22)
更多存档...

好长时间不写笔记了，这段时间就是乱忙，忙看书，忙上课，还忙着玩。只是老师有任务才慢忽悠悠的查一些东西，真的堕落了吗……哎。进入正题……

今天淘到一段不错的代码，是用js模拟弹出系统对话框的。

出现的问题：为什么要模拟这个对话框，主要是因为做的系统是给老外用的，要求一切显示都是英语。在网上查到，其实js里面的conform弹出对话框中显示的“确定”和“取消”按钮，是根据电脑的系统来设置的，所以，这样的话，肯定有的地方显示成中文，有的地方显示英文，不合要求。

在网上查了好多，也有很多的组件，但是，仅仅这么一个小的功能，用一个组件有点浪费了。后来找到了一个好的。功能实现很齐全，根据自己的需要改了一下。其中的代码，我还是放上最初的吧。

下面的代码，我已经测试过了，直接放在一个html中可以运行的。

Code:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>MessageBox演示</title>
<scriptlanguage="javascript">
/*******************************************************************************************
*以下是原作者信息，其中稍微做了一点点修改
*http://2lin.net
*Email:caoailin@gmail.com
*QQ:38062022
*下面的内容可以拷贝到一个JS文件里面
*********************************************************************************************/
//控制按钮常量
varMB_OK=0;
varMB_CANCEL=1;
varMB_OKCANCEL=2;
varMB_YES=3;
varMB_NO=4;
varMB_YESNO=5;
varMB_YESNOCANCEL=6;
//控制按钮文本
varMB_OK_TEXT="submit";
varMB_CANCEL_TEXT="cancel";
varMB_YES_TEXT="yes";
varMB_NO_TEXT="no";
//提示图标
varMB_ICON="http://2lin.net/image/information.gif";
//委托方法
varMB_OK_METHOD=null;
varMB_CANCEL_METHOD=null;
varMB_YES_METHOD=null;
varMB_NO_METHOD=null;
varMB_BACKCALL=null;
varMB_STR='<styletype="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:1pxsolid#000;}'+
'.msgbox_control{text-align:center;clear:both;height:28px;}'+
'.msgbox_button{background-color:#B1CDF3;border:1pxsolid#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:1pxsolid#999999;}'+
'--></style>'+
'<divid="msgBoxMask"class="msgbox_mask"style="filter:alpha(opacity=0);display:none;"></div>'+
'<divclass="msgbox"style="display:none;z-index:100000;"id="msgBox">'+
'<divclass="msgbox_title"id="msgBoxTitle"></div>'+
'<divclass="msgbox_icon"id="msgBoxIcon"></div>'+
'<divclass="msgbox_content"id="msgBoxContent"></div>'+
'<divclass="msgbox_control"id="msgBoxControl"></div></div>';
varTimer=null;
document.write(MB_STR);
varicon=newImage();
icon.src=MB_ICON;
/*提示对话框
*参数1:提示内容
*参数2:提示标题
*参数3:图标路径
*参数4:按钮类型
*/
functionMessageBox(){
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='<imgsrc="{0}">';
var_btnStr='<inputname="{0}"id="{0}"type="button"class="msgbox_button"value="{1}"onclick="MBMethod(this)"/>';
switch(_button)
{
caseMB_CANCEL:_btnStr=_btnStr.toFormatString("msgBoxBtnCancel",MB_CANCEL_TEXT);break;
caseMB_YES:_btnStr=_btnStr.toFormatString("msgBoxBtnYes",MB_YES_TEXT);break;
caseMB_NO:_btnStr=_btnStr.toFormatString("msgBoxBtnNo",MB_NO_TEXT);break;
caseMB_OKCANCEL:
_btnStr=_btnStr.toFormatString("msgBoxBtnOk",MB_OK_TEXT)+""+
_btnStr.toFormatString("msgBoxBtnCancel",MB_CANCEL_TEXT);
break;
caseMB_YESNO:
_btnStr=_btnStr.toFormatString("msgBoxBtnYes",MB_YES_TEXT)+""+
_btnStr.toFormatString("msgBoxBtnNo",MB_NO_TEXT);
break;
caseMB_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();
}elseif(_button==MB_YES||_button==MB_YESNO||_button==MB_YESNOCANCEL){
$("msgBoxBtnYes").focus();
}
}
varOpacityValue=0;
varScrollTop=0;
varScrollLeft=0;
functionGetBrowserDocument()
{
var_dcw=document.documentElement.clientHeight;
var_dow=document.documentElement.offsetHeight;
var_bcw=document.body.clientHeight;
var_bow=document.body.offsetHeight;
if(_dcw==0)returndocument.body;
if(_dcw==_dow)returndocument.documentElement;
if(_bcw==_bow&&_dcw!=0)
returndocument.documentElement;
else
returndocument.body;
}
functionSetOpacity(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){}
}
functionDoAlpha(){
if(OpacityValue>20){clearInterval(Timer);return0;}
OpacityValue+=5;
SetOpacity($("msgBoxMask"),OpacityValue);
}
functionMBMethod(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(vari=0;i<arguments.length;i++){
_str=eval("_str.replace(///{"+i+"//}/ig,'"+arguments[i]+"')");
}
return_str;
}
function$(obj){
returndocument.getElementById(obj);
}
///////////////////////////////////////////////////////////////////////////////////////
</script>
<scriptlanguage="javascript">
functiontest()
{
var_msg="<fontcolor=red><b>演示：</b></font><br/>普通对话框！";
MessageBox(_msg);
}
functiontest1()
{
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="<fontcolor=red><b>演示：</b></font><br/>调用对话框。是、否、取消";
MessageBox(_msg,"演示",null,MB_YESNOCANCEL);
}
functiontest2()
{
var_msg="<fontcolor=red><b>演示：</b></font><br/>调用对话框。是、否、取消";
MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
}
functiontest4()
{
var_msg="<fontcolor=red><b>演示：</b></font><br/>调用对话框。确定、取消";
MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback);
}
functioncallback(value)
{
switch(value)
{
caseMB_OK:alert('你按了OK');break;//或者点击跳转到另一个页面：location.href="http://www.baidu.com";break;
caseMB_YES:alert('你按了YES');break;
caseMB_NO:alert('你按了NO');break;
caseMB_CANCEL:alert('你按了CANCEL');break;
}
}
functiontest3()
{
MB_YES_TEXT="演示一";
MB_NO_TEXT="演示二";
MB_CANCEL_TEXT="演示三";
var_msg="<fontcolor=red><b>演示：</b></font><br/>这是自定义的对话框<br/><fontcolor=green>MB_YES_TEXTMB_NO_TEXTMB_CANCEL_TEXTMB_OK_TEXT</font>";
MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);
}
</script>
</head>
<body>
<tablewidth="1000"align="center"border="1"bordercolor="#000000">
<tr>
<td>　</td>
<tdalign="center"><ahref="javascript:test()">普通演示</a></td>
<td>　</td>
</tr>
<tr>
<td></td>
<tdalign="center"><ahref="javascript:test1()">回调演示一</a>
<label></label></td>
<td></td>
</tr>
<tr>
<td></td>
<tdalign="center"><ahref="javascript:test2()">回调演示二
</a></td>
<td></td>
</tr>
<tr>
<td></td>
<tdalign="center"><ahref="javascript:test4()">回调演示三</a><ahref="javascript:test3()"></a></td>
<td></td>
</tr>
<tr>
<td></td>
<tdalign="center"><ahref="javascript:test3()">自定义演示
</a></td>
<td></td>
</tr>
</table>
<divalign="center"><inputname=""value="自定义演示"type="button"onclick="test3()"/></div>
</body>
</html>