在html页面打开一个新的窗口,可以使用JavaScript语言操作模态和非模态对话框实现。window.showModalDialog()方法、window.showModelessDialog()方法分别用来用来创建一个显示HTML内容的模态/非模态对话框。
所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。
1
、方法说明
window.showModalDialog()
方法、window.showModelessDialog()方法的语法规则如下:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明如下:
sURL
--
必选参数,类型:字符串。用来指定对话框要显示的文档的
URL
。
vArguments
--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过
window.dialogArguments
来取得传递进来的参数
。
sFeatures
--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号
“;”
隔开。
关于该参数的详细说明见后面附录。
2
、使用示例
下面用一个示例来说明
window.showModalDialog()
方法的使用。
该示例主要模拟一个号码选择功能,由两个jsp页面test.jsp和sel.jsp、一个struts的action组件SelAccNbrAction.java、一个struts的actionFrom组件SelAccNbrForm.java构成。
在
test.jsp
输入业务处理需要的参数,然后点击“选号”按钮调用js方法selectAccNbr(),弹出模态对话框sel.jsp;在sel.jsp中从号码列表中选择号码后点击“确定”按钮,将选中的号码返回给test.jsp;test.jsp得到sel.jsp回传参数后写到“
accNbr
”文本框中。
test.jsp
中js方法selectAccNbr()代码如下:
<script type="text/javascript">
function selectAccNbr(){
alert("call modalDialog");
var href = "../selAccNbr.do?method=main";
if(document.all("commServID") != null) {
href = href + "&commServID=" + document.all("commServID").value; }
if(document.all("accNbrOld") != null) {
href = href + "&accNbrOld=" + document.all("accNbrOld").value; }
if(document.all("localNetId") != null) {
href = href + "&localNetId=" + document.all("localNetId").value;
}
if(document.all("areaId") != null) {
href = href + "&areaId=" + document.all("areaId").value;
}
if(document.all("exchId") != null) {
href = href + "&exchId=" + document.all("exchId").value;
}
if(document.all("workAreaId") != null) {
href = href + "&workAreaId=" + ocument.all("workAreaId").value;
}
if(document.all("staffid") != null) {
href = href + "&staffid=" + document.all("staffid").value;
}
document.getElementById("reId1").disabled=true;
var retValue = window.showModalLessDialog(href, window,
"dialogHeight:620px; dialogWidth: 900px; center: yes; help: no;status:no;title:no;scroll:no");
if(retValue!=null){
document.all("accNbr").value = retValue;
}
return false;
}
</script>
注意问题:只弹出一个没有任何显示内容的对话框的可能原因是拼
href串时提交的SelAccNbrAction的路径问题。
其中sel.jsp页面的初始化是由SelAccNbrAction.java完成的。在js中将请求提交给SelAccNbrAction.java的main() 方法,同时将输入参数以请求参数的形式传递过去。
在SelAccNbrAction.java中进行业务处理,包括构造可供选择的号码列表和封装SelAccNbrForm.java中的一些属性;最后通过sel.jsp(该)显示可供选择的号码列表。
SelAccNbrAction.java
的main()方法如下:
public
ActionForward main(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
SelAccNbrForm selAccNbrForm = (SelAccNbrForm) form;
if
(request.getParameter(
"commServID"
)!=
null
&& request.getParameter(
"commServID"
)!=
""
){
selAccNbrForm.setCommServID(Long.valueOf(request.getParameter(
"commServID"
)));
}
if
(request.getParameter(
"accNbrOld"
)!=
null
&& request.getParameter(
"accNbrOld"
)!=
""
){
selAccNbrForm.setAccNbrOld(request.getParameter(
"accNbrOld"
));
}
if
(request.getParameter(
"localNetId"
)!=
null
&& request.getParameter(
"localNetId"
)!=
""
){
selAccNbrForm.setLocalNetId(Long.valueOf(request.getParameter(
"localNetId"
)));
}
if
(request.getParameter(
"areaId"
)!=
null
&& request.getParameter(
"areaId"
)!=
""
){
selAccNbrForm.setAreaId(Long.valueOf(request.getParameter(
"areaId"
)));
}
if
(request.getParameter(
"exchId"
)!=
null
&& request.getParameter(
"exchId"
)!=
""
){
selAccNbrForm.setExchId(Long.valueOf(request.getParameter(
"exchId"
)));
}
if
(request.getParameter(
"workAreaId"
)!=
null
&& request.getParameter(
"workAreaId"
)!=
""
){
selAccNbrForm.setWorkAreaId(Long.valueOf(request.getParameter(
"workAreaId"
)));
}
if
(request.getParameter(
"staffid"
)!=
null
&& request.getParameter(
"staffid"
)!=
""
){
selAccNbrForm.setStaffid(Long.valueOf(request.getParameter(
"staffid"
)));
}
//
初始化可选号码列表
List lst=
new
ArrayList();
for
(
int
i=0;i<10;i++){
String value=Integer.valueOf(i).toString();
String label=Integer.valueOf(i+1).toString();
LabelValueBean lvBean=
new
LabelValueBean(label,value);
lst.add(lvBean);
}
System.
out
.println(
"-------------------------"
);
System.
out
.println(
"
可选号码个数:
"
+lst.size());
LabelValueBean accNbr=
null
;
for
(
int
i=0;i<lst.size();i++){
accNbr=(LabelValueBean)lst.get(i);
System.
out
.println(accNbr.getLabel());
}
System.
out
.println(
"-------------------------"
);
if
(lst!=
null
&& lst.size()>0){
selAccNbrForm.setAccNbrLst(lst);
}
return
mapping.findForward(
"selAccNbr"
);
}
在sel.jsp页面选择号码后点击“确定”按钮调用js中的方法getAccNbr()将选择的号码回传给test.jsp。
js
中的方法getAccNbr()代码如下:
<script type="text/javascript">
function getAccNbr(){
window.returnValue = document.all("accNbr").value;
window.close();
return false;
}
</script>
附录:描述对话框的外观的参数配置
1).
dialogHeight :对话框高度,不小于100
px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2).
dialogWidth: 对话框宽度。
3).
dialogLeft: 离屏幕左的距离。
4).
dialogTop: 离屏幕上的距离。
5).
center: {yes | no | 1 | 0 }:窗口是否居中,默认
yes。注意,指定了居中属性,同时设置了dialogLeft和dialogTop属性值,那么窗口位置将遵从后者。
6).
help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认
yes。
7).
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认
no。
8).
status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为
yes[ Modeless]或no[Modal]。
9).
scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为
yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10).
dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为
no。
11).
edge:{ sunken | raised }:指明对话框的边框样式。默认为
raised。
12).
unadorned:{ yes | no | 1 | 0 | on | off }:默认为
no。