Struts中應用showModalDialog(模式窗口)
方案1:


通常我們在開發WEB應用時會用到showModalDialog(模式窗口)來增加或修改記錄,而應用或設置不當時會造成死循環或頁面流轉錯誤,以下對我在Struts上應用showModalDialog(模式窗口)時實現方法描述:
應用的情況:
1.在目錄樹的右鍵單上選新增,彈出新增窗口--showModalDialog(模式窗口)。
2.錄入數據后submit,調用Action保存數據。
3.在Action判斷保存是否出錯,出錯時返回新增窗口提示錯誤,成功后關閉彈出的新窗口并刷新父頁面的分類樹。
代碼簡寫如下:
目錄樹頁面:
<A?HREF="javascript:?addTree();">新增節點</A>
<SCRIPT?language='JavaScript'?type='text/javascript'>
?function?addTree(){
??//用于準備新增頁面所需的元素準備
??var?URL=?"treeAction.do?method=add&parentid=";??
??if?(d.getSelected()==null?){
???URL?=?URL?+?'0';
??}else{
???URL?=?URL?+?tree.getSelected();
??}
??//alert(URL);
??window.showModalDialog(URL,window,"center:true;");
?}
</SCRIPT>
<SCRIPT?language='JavaScript'?type='text/javascript'>
?function?addTree(){
??//用于準備新增頁面所需的元素準備
??var?URL=?"treeAction.do?method=add&parentid=";??
??if?(d.getSelected()==null?){
???URL?=?URL?+?'0';
??}else{
???URL?=?URL?+?tree.getSelected();
??}
??//alert(URL);
??window.showModalDialog(URL,window,"center:true;");
?}
</SCRIPT>
新增頁面--showModalDialog(模式窗口):
<%@?include?file="/include/jsp/taglib.jsp"?%>
<!--?save?ok!?LiuYX-->
<logic:equal?name="close"?value="OK">
??????<script?language="javascript">
??????<!--
??????????//alert("here");
??????????var?parentWindow?=?window.dialogArguments;??????????
??????????parentWindow.location.reload();
????????window.close();
????//?-->
????</script>????
</logic:equal>??????
??????
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html:html?lang="true">
??<head>
????<html:base?target="_self"/>
????<title>Add?Form</title>
????<meta?http-equiv="pragma"?content="no-cache">
????<meta?http-equiv="cache-control"?content="no-cache">
????<meta?http-equiv="expires"?content="0">????
????<meta?http-equiv="description"?content="cate?edit">
????
??</head>
??
??<body>?
??<html:errors/>?????
??<!--?add?begin?-->??
???<html:form?action="/treeAction.do?method=update"?method="post">
????<html:hidden?property="parentid"/>
??????<table?border="0"??align="center">
????????<tr>
??????????<td><bean:message?bundle="ar1"?key="catename"/>:</td>
??????????<td>
????????????<html:text?property="catename"/>
????????????????????
??????????</td>
????????</tr>
????????<tr></tr>
????????<tr>
??????????<td?align="center"><html:submit><bean:message?bundle="ar1"?key="button.save"/></html:submit></td>
??????????<td?align="center"><html:button?property="button"?onclick="javascript:window.close();"><bean:message?bundle="ar1"?key="button.cancel"/></html:button></td>
????????</tr>
??????</table>
????</html:form>
??</body>
</html:html>
<!--?save?ok!?LiuYX-->
<logic:equal?name="close"?value="OK">
??????<script?language="javascript">
??????<!--
??????????//alert("here");
??????????var?parentWindow?=?window.dialogArguments;??????????
??????????parentWindow.location.reload();
????????window.close();
????//?-->
????</script>????
</logic:equal>??????
??????
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html:html?lang="true">
??<head>
????<html:base?target="_self"/>
????<title>Add?Form</title>
????<meta?http-equiv="pragma"?content="no-cache">
????<meta?http-equiv="cache-control"?content="no-cache">
????<meta?http-equiv="expires"?content="0">????
????<meta?http-equiv="description"?content="cate?edit">
????
??</head>
??
??<body>?
??<html:errors/>?????
??<!--?add?begin?-->??
???<html:form?action="/treeAction.do?method=update"?method="post">
????<html:hidden?property="parentid"/>
??????<table?border="0"??align="center">
????????<tr>
??????????<td><bean:message?bundle="ar1"?key="catename"/>:</td>
??????????<td>
????????????<html:text?property="catename"/>
????????????????????
??????????</td>
????????</tr>
????????<tr></tr>
????????<tr>
??????????<td?align="center"><html:submit><bean:message?bundle="ar1"?key="button.save"/></html:submit></td>
??????????<td?align="center"><html:button?property="button"?onclick="javascript:window.close();"><bean:message?bundle="ar1"?key="button.cancel"/></html:button></td>
????????</tr>
??????</table>
????</html:form>
??</body>
</html:html>
最后在Action中判斷新增是否成功,成功則:


否則:
//設定關團窗口的開關
request.setAttribute("close","NO");
request.setAttribute("close","NO");
方案2:
在網頁上,我們一般使用window.showModalDialog(<url>,<標題>,<屬性>)來彈出一個模態對話框。但是在模態對話框中的提交有時候是無效的,而且頁面跳轉的話不是在對話框中的。
??? 解決這個問題的方法一般是在對話框中的頁面上添加一個<iframe>,由<iframe>來轉發真正的請求。為了增加頁面的可重用行,我們一般會增加一個portal頁,如下:





















?? 下面說明一下如上代碼。一般我們可能會在彈出對話框時使用這樣的方式:window.showModalDialog("/test/test.do",“測試”,"dialogWidth:500px;dialogheight:650px"),如果這樣的話,test.do跳轉的頁面如果繼續有請求的話,服務器可能服務收到請求(可能是session的問題),還有請求后的跳轉頁面不會出現在對話框中。