zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    PHP Smarty模板的安装
    百度地图API使用方法详解
    总结的一些微信API接口
    WePayUI 快快尝鲜体验
    Python发送邮件
    Python网络编程
    python 内置函数
    Python操作数据库
    Python操作excel
    python之函数
  • 原文地址:https://www.cnblogs.com/chenjunbiao/p/1760244.html
Copyright © 2011-2022 走看看