zoukankan      html  css  js  c++  java
  • ModalPopup

    ModalPopup控件弹出式控件最大的特色就是弹出具备“模式”窗口风格。类似于WINDOWS关机对话框模式。

    属性列表:
    TargetControlID 点击后出现对话框的控件,一般为按钮控件
    PopupControlID 对话框中的Panel的id
    BackgroundCssClass 背景的css
    DropShadow 对话框是否有阴影效果
    OkControlID Ok按钮的id
    OnOkScript Ok按钮触发脚本
    CancelControlID Cancel按钮的id
    OkCancelScript Cancel按钮触发脚本
    PopupDragHandleControlID Panel的中的标题栏,可以拖动,一般也是Panel
    X 出现时,顶部的位置。
    Y 出现时,左边的位置。
     
    常见问题及使用技巧:
    常见问题:如何让OKControlID或CancelControlID属性所指定的按钮首先执行客户端JS代码,然后再回送至服务器执行服务器代码?
    使用技巧:ModalPopup控件的OK和CANCEL按钮被设计为只处理客户端或者服务器端代码,因此如果指定了OnOkScript或OnCancelScrip,那么原Button的服务器端代码将被屏蔽。解决方法在要处里的方法内加入一条_doPostBack()模似一次回发。
    常见问题:何时应该选择使用模态对话框给用户提示?
    使用技巧:竟量少用。

    实例解析一、简单应用实例
    1.UI界面
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>   
        </div>
            <asp:Panel ID="Panel1" runat="server" Height="271px" Width="410px">
                <asp:Panel ID="Panel2" runat="server" Height="187px" Width="305px">
                    <table style=" 382px; height: 169px">
                        <tr>
                          <td colspan="3"><asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px">登陆窗口:</asp:Panel></td>
                        </tr>
                        <tr>
                            <td style=" 100px; height: 70px">用户名:</td>
                            <td style=" 100px; height: 70px"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                            <td style=" 100px; height: 70px"></td>
                        </tr>
                        <tr>
                            <td style=" 100px; height: 58px">密码:</td>
                            <td style=" 100px; height: 58px"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                            <td style=" 100px; height: 58px"><asp:Button ID="Button1" runat="server" Text="登陆" />
                                <asp:Button ID="Button2" runat="server" Text="取消" /></td>
                        </tr>
                    </table>
                </asp:Panel>
                <asp:LinkButton ID="LinkButton1" runat="server">点击登陆</asp:LinkButton></asp:Panel>
            <cc1:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="Button2"
                drag="True" dropshadow="True" okcontrolid="Button1" popupcontrolid="Panel2" popupdraghandlecontrolid="Panel3"
                targetcontrolid="LinkButton1"></cc1:modalpopupextender>
        </form>
    </body>

    实例二、简单应用实例二
    <head id="Head1" runat="server">
        <title>ModalPopup Demo</title>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .confirmPanel
            {
                border: 2px solid #ccc;
                background-color: #fff;
                padding: 15px;
                230px;
                height: 50px;
            }
            .modalBackground
            {
                background-color: #ddd;
                filter:alpha(opacity=70);
             opacity:0.7;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm" runat="server" />
            <asp:LinkButton ID="lbtnAdvancedOperation" runat="server">执行高级操作</asp:LinkButton>
            <asp:Panel ID="confirmPanel" runat="server" CssClass="confirmPanel" Style="display: none">
                <div style="height: 30px">该功能只提供给登录用户,您是否要登录?</div>
                <div style="text-align: center;">
                    <asp:Button ID="btnOK" runat="server" Text="OK"></asp:Button>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>
                </div>
            </asp:Panel>
            <ajaxToolkit:ModalPopupExtender ID="mpe" TargetControlID="lbtnAdvancedOperation"
                PopupControlID="confirmPanel" BackgroundCssClass="modalBackground" OkControlID="btnOK"
                OnOkScript="window.location = 'login.aspx'" CancelControlID="btnCancel" runat="server" />
        </form>
    </body>

  • 相关阅读:
    codeforces 980A Links and Pearls
    zoj 3640 Help Me Escape
    sgu 495 Kids and Prizes
    poj 3071 Football
    hdu 3853 LOOPS
    hdu 4035 Maze
    hdu 4405 Aeroplane chess
    poj 2096 Collecting Bugs
    scu 4444 Travel
    zoj 3870 Team Formation
  • 原文地址:https://www.cnblogs.com/astar/p/967982.html
Copyright © 2011-2022 走看看