<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模态对话框</title> </head> <body> <div> <hr> </div> <!--对话框相关HTML代码--> <table onselectstart="javascript:return false;"> <tr> <td valign="center"> </td> </tr> </table> <script type="text/javascript" language="javascript"><!--
//按钮类型 var MB_OK = 1; var MB_CANCEL = 2; var MB_YES = 4; var MB_NO = 8; /*================================================================================*/ /*================================================================================*/ //MessageBox类 //因为利用层不可能实现真正模态对话框，用户仍然可以点击对话框以外的区域，所以需要一个覆盖框－coverIdStr //另一方面为了承载对话框，需要dlgIdStr function CMessageBox(coverIdStr, dlgIdStr) { this.coverIdStr = coverIdStr; this.coverId = document.getElementById(this.coverIdStr); this.dlgIdStr = dlgIdStr; this.dlgId = document.getElementById(this.dlgIdStr); this.dlgCaptionId = null; this.dlgInfoId = null; this.dlgButtonsId = null; this.caption = ""; this.info = ""; this.buttons = MB_OK; this.returnValue = 0; //返回值，0表示不确定，其它值可能是MB_OK、MB_CANCEL、MB_YES、MB_NO this.DoModal = DoModal; this.IniDlg = IniDlg; this.ShowDlg = ShowDlg; } //caption 对话框标题 //info 对话框内容，HTML无效 //buttons 对话框按钮，使用一个按钮类型值或多个按钮类型值相加（但不能重复相加），HTML有效 //objNameStr CMessageBox对象名称 function DoModal(caption, info, buttons, objNameStr) { this.dlgId.innerHTML = "<div"padding:0px;width:300px;background-color:buttonface;filter:alpha(opacity=100);" + "border-top:buttonhighlight 2px solid;" + "border-right:buttonshadow 2px solid;" + "border-bottom:buttonshadow 2px solid;" + "border-left:buttonhighlight 2px solid;" + "cursor:default;\" onselectstart=\"javascript:return false;\">" + " <div id=\"" + this.dlgIdStr + "_caption\""padding:2px;width:100%;background-color:#000066;text-align:left;color:#FFFFFF;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_info\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_buttons\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + "</div>"; this.dlgCaptionId = document.getElementById(this.dlgIdStr + "_caption"); this.dlgInfoId = document.getElementById(this.dlgIdStr + "_info"); this.dlgButtonsId = document.getElementById(this.dlgIdStr + "_buttons"); this.IniDlg(caption, info, buttons, objNameStr); this.ShowDlg(true); } //初始化对话框 function IniDlg(caption, info, buttons, objNameStr) { this.dlgCaptionId.innerText = caption; this.dlgInfoId.innerHTML = info; this.dlgButtonsId.innerHTML = ""; if (parseInt(buttons/8) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 否 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_NO);OnDlgReturn('" + objNameStr + "', MB_NO);\"> " + this.dlgButtonsId.innerHTML;//前后空格，避免各个按钮之间离得太近 buttons -= 8; } if (parseInt(buttons/4) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 是 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_YES);OnDlgReturn('" + objNameStr + "', MB_YES);\"> " + this.dlgButtonsId.innerHTML; buttons -= 4; } if (parseInt(buttons/2) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 取 消 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_CANCEL);OnDlgReturn('" + objNameStr + "', MB_CANCEL);\"> " + this.dlgButtonsId.innerHTML; buttons -= 2; } if (buttons == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 确 定 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_OK);OnDlgReturn('" + objNameStr + "', MB_OK);\"> " + this.dlgButtonsId.innerHTML; } } //显示、隐藏对话框，并确定是点击哪个按钮关闭对话框的 //display为true－显示 //display为false－隐藏 function ShowDlg(display, returnValue) { if (display) { ReSizeDlg(); this.coverId.style.display = "block"; } else { this.coverId.style.display = "none"; } this.returnValue = returnValue; } /*================================================================================*/ /*================================================================================*/ //对话框返回函数 //自行修改函数代码 function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox 对象 " + objNameStr + " 的返回值是" + returnValue); } //保持cover框覆盖整个客户区 //保持对话框在预期位置 //如果覆盖框id不为cover，则需要手动修改此函数。 //document.body.onscroll和document.body.onresize触发本函数 //同时此函数也被CMessageBox调用 function ReSizeDlg() { var cover = document.getElementById("cover"); cover.style.pixelTop = document.body.scrollTop; cover.style.pixelLeft = document.body.scrollLeft; cover.style.width = document.body.clientWidth; cover.style.height = document.body.clientHeight; } document.body.onscroll = ReSizeDlg; document.body.onresize = ReSizeDlg; /*================================================================================*/ /*================================================================================*/ var objDlg = new CMessageBox("cover", "dlg"); var objDlg2 = new CMessageBox("cover", "dlg");
// --></script> <input type="button" value="点我"> <input type="button" value="然后点我"> </body> </html>
五、showModalDialog 打开的模态对话框有不少经典的缺陷，解决办法