HTML模态窗口

      在CS2.1中引入了新的HTML模态窗口,新窗口使用了更酷的特效,提高用户的体验,这里把它提取出来和大家分享。
      
      例子中的父页面代码如下:
None.gif < html  xmlns ="http://www.w3.org/1999/xhtml"   >
None.gif
< head  id ="Head1"  runat ="server" >
None.gif    
< title > Untitled Page </ title >
None.gif    
< link  href ="Styles/Common.css"  rel ="stylesheet"  type ="text/css"   />
None.gif    
< link  href ="Styles/Modal.css"  rel ="stylesheet"  type ="text/css"   />
None.gif    
< script  language ="javascript"  type ="text/javascript"  src ="Scripts/telligent_modal.js" ></ script >
ExpandedBlockStart.gifContractedBlock.gif
< script  language ="JavaScript"  type ="text/javascript" > dot.gif
InBlock.gif    
function setValue(res)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{
InBlock.gif        alert(res);
ExpandedBlockEnd.gif    }

None.gif
</ script >
ExpandedBlockStart.gifContractedBlock.gif
< script  language ="javascript"  type ="text/javascript" > dot.gif
InBlock.gif
// <![CDATA[
InBlock.gif
Telligent_Modal.Configure('loading.html',['CommonModal'],['CommonModalTitle'],['CommonModalClose'],['CommonModalContent'],['CommonModalFooter'],['CommonModalResize'],['CommonModalMask'],100);
ExpandedBlockEnd.gif
// ]]>
None.gif
</ script >
None.gif
</ head >
None.gif
< body >
None.gif    
< form  id ="form1"  runat ="server" >
None.gif    
< div >
None.gif        
< asp:Button  ID ="Button1"  runat ="server"  Text ="打开模态窗口"
None.gif         
None.gif         OnClientClick
="Telligent_Modal.Open('ModalWindow.aspx', 480, 320, setValue); return false;"
None.gif        
None.gif         
/>
None.gif        
None.gif    
</ div >
None.gif    
</ form >
None.gif
</ body >
None.gif
</ 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函数的输出。
None.gif     protected void Button1_Click(object sender, EventArgs e)
None.gif    {
None.gif        //回传值,并关闭窗口
None.gif        Page.ClientScript.RegisterStartupScript(Page.GetType(),"closepage",
ExpandedBlockStart.gifContractedBlock.gif            String.Format("
< script  language =\"javascript\" > dot.gif window.parent.Telligent_Modal.Close('dot.gif{0}'); </ script > ", txt.Text));
None.gif
None.gif    }
None.gif    protected void Button2_Click(object sender, EventArgs e)
None.gif    {
None.gif        //只半闭窗口
None.gif        Page.ClientScript.RegisterStartupScript(Page.GetType(), "closepage",
ExpandedBlockStart.gifContractedBlock.gif            "
< script  language =\"javascript\" > dot.gif window.parent.Telligent_Modal.Close('true'); </ script > ");
None.gif    }
使用window.parent.Telligent_Modal.Close函数可以回传怎样的值到调用页中。

源代码下载: ModalWindow.rar

转载于:https://www.cnblogs.com/BillChen/archive/2006/10/27/541896.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值