showModalDialog模态对话框的使用
基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框
window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL -- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL
vArguments -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过
window.dialogArguments来取得传递进来的参数
sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号;隔开
----------------
1. dialogHeight: 对话框高度,不小于100px
2. dialogWidth: 对话框宽度
3. dialogLeft: 离屏幕左的距离
4. dialogTop: 离屏幕上的距离
5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度
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(HTML Application)中的,在一般的网页中一般不使用
10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no
11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised
12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no
基本用法:
1、传递参数(通过vArguments来进行传递的,类型不限制,对于字符串类型,最大为4096个字符,也可以传递对象)
2、返回参数(通过window.returnValue向打开对话框的窗口返回信息,可以为字符串数值或对象)
父文件(parent.html):
<script language ="JavaScript"> <!-- function testModal(){ var obj = new Object(); obj.name="sky"; var returnStr = window.showModalDialog("modal.html",obj,"dialogWidth=580px;dialogHeight=300px"); if(returnStr=="close"){ //TODO reload the part of price } } --> </script>
子文件(modal.html):
<script language ="JavaScript"> <!-- var obj = window.dialogArguments; alert("name is :" + obj.name); function closeModal(){ window.returnValue="close"; window.close(); } --> </script>
3、在IE的modal窗口操作数据经过服务器传到页面会打开新的页面,而不是原来的modal窗口,解决办法如下
parent.jsp
<script language ="JavaScript"> <!-- function doPriceModify(dealKbn,revDt){ var partId = $("#partId").val(); var url = "PartModify?partId="+partId; var winReturn = window.showModalDialog(url,"PartModify","dialogWidth:850px;dialogHeight:500px"); if(winReturn=="close"){ } } --> </script>
PartAction.java
@Namespace("/") @ParentPackage("struts-default") @Results( { @Result(name = "success", location = "/WEB-INF/view/modalFrame.jsp") ,@Result(name = "login", location = "/WEB-INF/view/modal.jsp")}) public class PartAction extends ActionSupport { private static final long serialVersionUID = 1L; private String partId; @Action("partModify") public String partModify() throws Exception { return SUCCESS; } @Action("showPart") public String showPart() throws Exception { return LOGIN; } public String getPartId() { return partId; } public void setPersons(String partId) { this.partId = partId; } }
modalFrame.jsp
<!doctype html> <html> <head> <title>partModify</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <meta http-equiv=Content-Style-Type content=text/css> </head> <frameset rows="100%"> <frame src="showPart?partId=${partId}" name="partModify" scrolling="auto" noresize> </frameset> </html>
modal.jsp
<!doctype html> <html> <head> <title>partModify</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <meta http-equiv=Content-Style-Type content=text/css> <script language ="JavaScript"> <!-- function closeModal(){ window.returnValue="close"; window.close(); } --> </script> </head> <body> <form action="modify" method="post" target="partModify"> </form> </body> </html>