在web應用中,如何以模態視窗方式新開啟子視窗,並往子視窗裡傳遞多個值,而在子視窗中,能接受這些值,並且對這些值修改後,可以再提交傳遞給父視窗呢?在codeproject上,有篇文章介紹了方法,下面介紹如下:
1 先建一個叫ParentWebForm的父視窗,寫入其中的HTML代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><br><HTML><br> <HEAD><br> <title>Parent Webform</title><br> <script language="javascript"><br>function OpenChild() <br>{<br> var ParmA = retvalA.value;<br> var ParmB = retvalB.value;<br> var ParmC = retvalC.value;<br> var MyArgs = new Array(ParmA, ParmB, ParmC);<br> var WinSettings = "center:yes;resizable:no;dialogHeight:300px"<br> //ALTER BELOW LINE - supply correct URL for Child Form<br> var MyArgs = window.showModalDialog(<br> "http://localhost/ModalWin/ChildWebForm.aspx", MyArgs, WinSettings);<br> if (MyArgs == null)<br> {<br> window.alert(<br> "Nothing returned from child. No changes made to input boxes")<br> }<br> else<br> {<br> retvalA.value=MyArgs[0].toString();<br> retvalB.value=MyArgs[1].toString();<br> retvalC.value=MyArgs[2].toString();<br> }<br>}<br> </script><br> </HEAD><br> <body><br> <P><INPUT id="retvalA" type="text" value="AAA"></P><br> <P><INPUT id="retvalB" type="text" value="BBB"></P><br> <P><INPUT id="retvalC" type="text" value="CCC"></P><br> <P><BUTTON onclick="OpenChild()" type="button"><br> Open Child Window</BUTTON><br> </P><br> </body><br></HTML> |
2 建立一個叫ChildWebform 的表單,寫入HTML代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Child Webform</TITLE>
<script language="javascript">
function Done() {
var ParmA = tbParamA.value;
var ParmB = tbParamB.value;
var ParmC = tbParamC.value;
var MyArgs = new Array(ParmA, ParmB, ParmC);
window.returnValue = MyArgs;
window.close();
}
function doInit() {
var ParmA = "Aparm";
var ParmB = "Bparm";
var ParmC = "Cparm";
var MyArgs = new Array(ParmA, ParmB, ParmC);
MyArgs = window.dialogArguments;
tbParamA.value = MyArgs[0].toString();
tbParamB.value = MyArgs[1].toString();
tbParamC.value = MyArgs[2].toString();
}
</script>
</HEAD>
<BODY onload="doInit()">
<P>Param A:<INPUT id="tbParamA" TYPE="text"></P>
<P>Param B:<INPUT ID="tbParamB" TYPE="text"></P>
<P>Param C:<INPUT ID="tbParamC" TYPE="text"></P>
<BUTTON onclick="Done()" type="button">OK</BUTTON>
</BODY>
</HTML>