window.showModalDialog()用法说明

           在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 :对话框高度，不小于１００ px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是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中的，在一般的网页中一般不使用。

10). dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为 no。

11). edge:{ sunken | raised }：指明对话框的边框样式。默认为 raised。

12). unadorned:{ yes | no | 1 | 0 | on | off }：默认为 no。