HTML模态窗口
在CS2.1中引入了新的HTML模态窗口，新窗口使用了更酷的特效，提高用户的体验，这里把它提取出来和大家分享。
例子中的父页面代码如下：
<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>
说明：
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函数可以回传怎样的值到调用页中。
源代码下载：ModalWindow.rar
例子中的父页面代码如下：
<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>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>"); }源代码下载：ModalWindow.rar
