本来想模仿winapi里的messagebox
但可惜js 不支持，阻塞模式。
返回值只能用异步了。
支持ff、ie、opera。
doctype 可以申明，也可以不申明。
<!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 * creation date: 2006-11-27 * 下面的内容可以拷贝到一个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 = "确定"; var mb_cancel_text = "取消"; var mb_yes_text = " 是 "; var mb_no_text = " 否 "; //提示图标 var mb_icon = "http://www.cnn6.net/files/080516/1_011452.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}" onclick="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; 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="1500" height="1000" 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> </body> </html>
以上就是个性化网页小弹窗的详细内容。