Js的MessageBox_Javascript教程-查字典教程网

摘要：看到论坛上有人模仿alert自己也写了一个本来想模仿winapi里的MessageBox但可惜js不支持阻塞模式返回值只能用异步了。支持FF...

看到论坛上有人模仿alert自己也写了一个

本来想模仿winapi里的MessageBox

但可惜js不支持阻塞模式

返回值只能用异步了。

支持FFieopera

DOCTYPE可以申明也可以不申明

存在问题

在opera里图层不能透明

对于页面内有iframe的也无法使用

在ie里无法遮住select的

复制代码代码如下:

<!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

*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"><></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;

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>

<tdalign="center"><ahref="javascript:test()">普通演示</a></td>

</tr>

<tr>

<tdalign="center"><ahref="javascript:test1()">回调演示一</a>

</tr>

<tr>

<tdalign="center"><ahref="javascript:test2()">回调演示二

</a></td>

</tr>

<tr>

<tdalign="center"><ahref="javascript:test4()">回调演示三</a><ahref="javascript:test3()"></a></td>

</tr>

<tr>

<tdalign="center"><ahref="javascript:test3()">自定义演示

</a></td>

</tr>

</table>

</body>

</html>