• 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>

  • 相关阅读:
    u盘的超级用法
    文件夹访问被拒绝
    web移动前端的click点透问题
    call()apply()ind()备忘录
    Safari中的new Date()格式化坑
    dataURI V.S. CSS Sprites 移动端
    css3属性之 box-sizing
    多人协作代码--公共库的引用与业务约定
    web前端本地测试方法
    依赖包拼合方法
  • 原文地址:https://www.cnblogs.com/astar/p/967982.html
Copyright © 2020-2023  润新知