Js的MessageBox

时间:2021-05-26

看到论坛上有人模仿alert 自己也写了一个
本来想模仿winapi里的MessageBox
但可惜js不支持 阻塞模式 
返回值只能用异步了。
支持 FFieopera
DOCTYPE可以申明 也可以不申明
存在问题 
在opera里图层不能透明 
对于页面内有iframe的也无法使用
在ie里无法遮住select的
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://
*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="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)+"&nbsp;&nbsp;"+
_btnStr.toFormatString("msgBoxBtnCancel",MB_CANCEL_TEXT);
break;

caseMB_YESNO:
_btnStr=_btnStr.toFormatString("msgBoxBtnYes",MB_YES_TEXT)+"&nbsp;&nbsp;"+
_btnStr.toFormatString("msgBoxBtnNo",MB_NO_TEXT);
break;

caseMB_YESNOCANCEL:
_btnStr=_btnStr.toFormatString("msgBoxBtnYes",MB_YES_TEXT)+"&nbsp;&nbsp;"+
_btnStr.toFormatString("msgBoxBtnNo",MB_NO_TEXT)+"&nbsp;&nbsp;"+
_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;
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="1500"height="1000"border="1"bordercolor="#000000">
<tr>
<td> </td>
<tdalign="center"><ahref="javascript:test()">普通演示</a></td>
<td> </td>
</tr>
<tr>
<td>&nbsp;</td>
<tdalign="center"><ahref="javascript:test1()">回调演示一</a>
<label></label></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<tdalign="center"><ahref="javascript:test2()">回调演示二

</a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<tdalign="center"><ahref="javascript:test4()">回调演示三</a><ahref="javascript:test3()"></a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<tdalign="center"><ahref="javascript:test3()">自定义演示

</a></td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章