前言
前不久,笔者碰到了需要根据需求来定制对话框的问题,比如要能改变对话框的大小,按钮上的文字要能改等等。笔者查了一些网上的资料,结合这些资料和一些自己的想法,终于实现了,现在把这种方法拿出来分享给大家,希望对大家有帮助。头一回写博,这其中如果有什么不妥和错误的地方,还请不吝赐教!
具体实现
此方法采用window.showModalDialog()方法实现(涉及到模态窗口和非模态窗口)
参考资料:http://www.cnblogs.com/tohen/archive/2007/05/29/764189.html
http://www.cnsdn.com.cn/blog/article.asp?id=2007
涉及到的js 功能函数:
1----SetDefaultButton():设置默认焦点按钮
2----Action_OK():点击OK按钮事件
3----Action_Cancel():点击Cancel按钮事件
4----ShowModalDialog():弹出对话框函数
ModalDialog.js代码如下——
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
// The actions when click OK button
function Action_OK() ... {
window.close();
window.returnValue = 1;
}
// The actions when click Cancel button
function Action_Cancel() ... {
window.returnValue = 0;
window.close();
}
function ShowModalDialog(args, width, height) ... {
if (window.showModalDialog) ...{
var result = window.showModalDialog("page.html", args, "dialogWidth=" + width + "px;dialogHeight=" + height + "px;status:no");
return result;
} else ...{
window.open("page.html", "newwindow", "height=" + width + ",dialogHeight=" + height + ", top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
}
}
上面的代码还存在一个缺陷,就是当浏览器不支持 window.showModalDialog 时,用window.open方法打开的对话框是非模态的,怎么样改为模态的,这点笔者还没有去研究,如果哪位高手有方法,还请赐教!
函数调用:
下面给出ModalDialog.htm源代码——
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GB18030" >
< title > 定制对话框实验 </ title >
< script type ="text/javascript" src ="ModalDialog.js" ></ script >
< script > ...
var args = new Array("提示內容","是","否");
var rt = ShowModalDialog(args,410,130);
if(rt == 1)
alert("你选择了 是 按钮,返回值为:" + rt);
else if(rt == 0)
alert("你选择了 否 按钮,返回值为:" + rt);
else
alert("你选择了直接关闭窗口,返回值为:" + rt);
//只有当返回值为1时才做相应处理,其他情况则表示用户选择了否,不想做处理
</ script >
</ head >
< body >
</ body >
</ html >
我们知道, window.showModalDialog(sURL [, vArguments] [, sFeatures])方法种,sURL是用来指示对话框显示内容的参数,这是展示的主体,所以我们还要将这个主体“画”出来,可以用一个html文件来实现,取名为page.html,代码给出如下——
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GB18030" >
< title > 对话框 </ title >
< script type ="text/javascript" src = "ModalDialog.js" ></ script >
</ head >
< body onload ='SetDefaultButton("btnConfOK")' >
< table width ="100%" height ="100%" >
< tr height ="70" >
< td width ="30%" align ="center" valign ="middle" >
< img src ="ico/question.ico" >
</ td >
< td width ="70%" >
< script > ...
document.write((window.dialogArguments)[0])
</ script >
</ td >
</ tr >
< tr height ="30" >
< td align ="right" valign ="bottom" colspan ="2" >
< button id ="btnConfOK" type ="button"
style ="height:30px; width:80px" tabindex ="1" onclick ="Action_OK()" >
< script > ...
document.write((window.dialogArguments)[1])
</ script >
</ button >
< button id ="btnConfCancel" type ="button"
style ="height:30px; width:80px" tabindex ="2" onclick ="Action_Cancel()" >
< script > ...
document.write((window.dialogArguments)[2])
</ script >
</ button >
</ td >
</ tr >
</ table >
</ body >
</ html >
上面用到了一个图标"ico/question.ico",是一个疑问号图标,windows系统中都可以找到的。
提示的内容和按钮上的文字则都用javascript来获取,其值来自在调用ShowModalDialog方法是传入的一个数组args,用这种方法就能根据需要来改变界面上的显示了。其余的应该不用讲解也能看懂了哈……
上面的代码是可以直接运行的,建立一个web工程,将上面三个文件拷贝到工程根目录下,并将图标文件拷贝到根目录下的ico目录下。发布到web服务器后,运行ModalDialog.htm就可以看到效果啦~!