例子中的父页面代码如下:
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head id ="Head1" runat ="server" >
< title > Untitled Page </ title >
< link href ="Styles/Common.css" rel ="stylesheet" type ="text/css" />
< link href ="Styles/Modal.css" rel ="stylesheet" type ="text/css" />
< script language ="javascript" type ="text/javascript" src ="Scripts/telligent_modal.js" ></ script >
< script language ="JavaScript" type ="text/javascript" >
function setValue(res)
{
alert(res);
}
</ script >
< script language ="javascript" type ="text/javascript" >
// <![CDATA[
Telligent_Modal.Configure('loading.html',['CommonModal'],['CommonModalTitle'],['CommonModalClose'],['CommonModalContent'],['CommonModalFooter'],['CommonModalResize'],['CommonModalMask'],100);
// ]]>
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Button ID ="Button1" runat ="server" Text ="打开模态窗口"
OnClientClick ="Telligent_Modal.Open('ModalWindow.aspx', 480, 320, setValue); return false;"
/>
</ div >
</ form >
</ body >
</ html >
说明:
< head id ="Head1" runat ="server" >
< title > Untitled Page </ title >
< link href ="Styles/Common.css" rel ="stylesheet" type ="text/css" />
< link href ="Styles/Modal.css" rel ="stylesheet" type ="text/css" />
< script language ="javascript" type ="text/javascript" src ="Scripts/telligent_modal.js" ></ script >
< script language ="JavaScript" type ="text/javascript" >
function setValue(res)
{
alert(res);
}
</ script >
< script language ="javascript" type ="text/javascript" >
// <![CDATA[
Telligent_Modal.Configure('loading.html',['CommonModal'],['CommonModalTitle'],['CommonModalClose'],['CommonModalContent'],['CommonModalFooter'],['CommonModalResize'],['CommonModalMask'],100);
// ]]>
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:Button ID ="Button1" runat ="server" Text ="打开模态窗口"
OnClientClick ="Telligent_Modal.Open('ModalWindow.aspx', 480, 320, setValue); return false;"
/>
</ div >
</ form >
</ body >
</ html >
1、Telligent_Modal.Configure方法可以指定窗体的样式配置。样式的配置编写在Common.css文件中,具体请参见附件文件。
2、打开子窗口使用Telligent_Modal.Open方法。如例子中 OnClientClick="Telligent_Modal.Open('ModalWindow.aspx', 480, 320, setValue); return false;"
ModalWindow.aspx 表示要被打开的窗口的文件路径。
480,320 表示被打开窗口的宽高。
setValue 是关闭子窗口后可以回调的JS函数,使用此函数你可以局部刷新父页面,或者再进行某些AJAX操作。
3、回调JS函数的定义应该有一个参数来接收回传的值。
子窗口,主要关注JS函数的输出。
protected void Button1_Click(object sender, EventArgs e)
{
//回传值,并关闭窗口
Page.ClientScript.RegisterStartupScript(Page.GetType(),"closepage",
String.Format(" < script language =\"javascript\" > window.parent.Telligent_Modal.Close('{0}'); </ script > ", txt.Text));
}
protected void Button2_Click(object sender, EventArgs e)
{
//只半闭窗口
Page.ClientScript.RegisterStartupScript(Page.GetType(), "closepage",
" < script language =\"javascript\" > window.parent.Telligent_Modal.Close('true'); </ script > ");
}
使用window.parent.Telligent_Modal.Close函数可以回传怎样的值到调用页中。
{
//回传值,并关闭窗口
Page.ClientScript.RegisterStartupScript(Page.GetType(),"closepage",
String.Format(" < script language =\"javascript\" > window.parent.Telligent_Modal.Close('{0}'); </ script > ", txt.Text));
}
protected void Button2_Click(object sender, EventArgs e)
{
//只半闭窗口
Page.ClientScript.RegisterStartupScript(Page.GetType(), "closepage",
" < script language =\"javascript\" > window.parent.Telligent_Modal.Close('true'); </ script > ");
}
源代码下载: ModalWindow.rar