Js的MessageBox
2018-09-24 21:43
看到论坛上有人模仿alert自己也写了一个
本来想模仿winapi里的MessageBox
但可惜js不支持阻塞模式
返回值只能用异步了。
支持FFieopera
DOCTYPE可以申明也可以不申明
存在问题
在opera里图层不能透明
对于页面内有iframe的也无法使用
在ie里无法遮住select的
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN
<htmlxmlns=
<head>
<metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/>
<title>MessageBox演示</title>
<scriptlanguage=javascript>
/*******************************************************************************************
*
*QQ:38062022
*Creationdate:2006-11-27
*下面的内容可以拷贝到一个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=确定;
varMB_CANCEL_TEXT=取消;
varMB_YES_TEXT=是;
varMB_NO_TEXT=否;
//提示图标
varMB_ICON=
//委托方法
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=msgBoxMaskclass=msgbox_maskstyle=filter:alpha(opacity=0);display:none;></div>+
<divclass=msgboxstyle=display:none;z-index:100000;id=msgBox>+
<divclass=msgbox_titleid=msgBoxTitle></div>+
<divclass=msgbox_iconid=msgBoxIcon></div>+
<divclass=msgbox_contentid=msgBoxContent></div>+
<divclass=msgbox_controlid=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=buttonclass=msgbox_buttonvalue={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;
$(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)
{
casemsgBoxBtnOk:if(MB_BACKCALL){MB_BACKCALL(MB_OK);}else{if(MB_OK_METHOD)MB_OK_METHOD();}break;
casemsgBoxBtnCancel:if(MB_BACKCALL){MB_BACKCALL(MB_CANCEL);}else{if(MB_CANCEL_METHOD)MB_CANCEL_METHOD();}break;
casemsgBoxBtnYes:if(MB_BACKCALL){MB_BACKCALL(MB_YES);}else{if(MB_YES_METHOD)MB_YES_METHOD();}break;
casemsgBoxBtnNo: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;
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=1500height=1000border=1bordercolor=#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>
</body>
</html>