现在的位置: 首页 > 综合 > 正文

模态窗口基础

2012年01月11日 ⁄ 综合 ⁄ 共 1958字 ⁄ 字号 评论关闭
在web应用中,如何以模态窗口方式新打开子窗口,并往子窗口里传递多个值,而在子窗口中,能接受这些值,并且对这些值修改后,可以再提交传递给父窗口呢?在codeproject上,有篇文章介绍了方法,下面介绍如下:
1 先建一个叫ParentWebForm的父窗口,写入其中的HTML代码如下:
  
&lt;!DOCTYPE HTML PUBLIC <span class="cpp-string">"-//W3C//DTD HTML 4.0 Transitional//EN"</span>&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;title&gt;Parent Webform&lt;/title&gt;
&lt;script language=<span class="cpp-string">"javascript"</span>&gt;
<span class="cpp-keyword">function</span> OpenChild()
{
<span class="cpp-keyword">var</span> ParmA = retvalA.value;
<span class="cpp-keyword">var</span> ParmB = retvalB.value;
<span class="cpp-keyword">var</span> ParmC = retvalC.value;
<span class="cpp-keyword">var</span> MyArgs = <span class="cpp-keyword">new</span> Array(ParmA, ParmB, ParmC);
<span class="cpp-keyword">var</span> WinSettings = <span class="cpp-string">"center:yes;resizable:no;dialogHeight:300px"</span>
<span class="cpp-comment">//ALTER BELOW LINE - supply correct URL for Child Form</span>
<span class="cpp-keyword">var</span> MyArgs = window.showModalDialog(
<span class="cpp-string">"http://localhost/ModalWin/ChildWebForm.aspx"</span>, MyArgs, WinSettings);
<span class="cpp-keyword">if</span> (MyArgs == <span class="cpp-keyword">null</span>)
{
window.alert(
<span class="cpp-string">"Nothing returned from child. No changes made to input boxes"</span>)
}
<span class="cpp-keyword">else</span>
{
retvalA.value=MyArgs[<span class="cpp-literal">0</span>].toString();
retvalB.value=MyArgs[<span class="cpp-literal">1</span>].toString();
retvalC.value=MyArgs[<span class="cpp-literal">2</span>].toString();
}
}
&lt;/script&gt;
&lt;/HEAD&gt;
&lt;body&gt;
&lt;P&gt;&lt;INPUT id=<span class="cpp-string">"retvalA"</span> type=<span class="cpp-string">"text"</span> value=<span class="cpp-string">"AAA"</span>&gt;&lt;/P&gt;
&lt;P&gt;&lt;INPUT id=<span class="cpp-string">"retvalB"</span> type=<span class="cpp-string">"text"</span> value=<span class="cpp-string">"BBB"</span>&gt;&lt;/P&gt;
&lt;P&gt;&lt;INPUT id=<span class="cpp-string">"retvalC"</span> type=<span class="cpp-string">"text"</span> value=<span class="cpp-string">"CCC"</span>&gt;&lt;/P&gt;
&lt;P&gt;&lt;BUTTON onclick=<span class="cpp-string">"OpenChild()"</span> type=<span class="cpp-string">"button"</span>&gt;
Open Child Window&lt;/BUTTON&gt;
&lt;/P&gt;
&lt;/body&gt;
&lt;/HTML&gt;

 

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>

抱歉!评论已关闭.