现在的位置: 首页 > 综合 > 正文

ModalPopup

2012年12月22日 ⁄ 综合 ⁄ 共 3563字 ⁄ 字号 评论关闭

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="width: 382px; height: 169px">
                    <tr>
                      <td colspan="3"><asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px">登陆窗口:</asp:Panel></td>
                    </tr>
                    <tr>
                        <td style="width: 100px; height: 70px">用户名:</td>
                        <td style="width: 100px; height: 70px"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                        <td style="width: 100px; height: 70px"></td>
                    </tr>
                    <tr>
                        <td style="width: 100px; height: 58px">密码:</td>
                        <td style="width: 100px; height: 58px"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                        <td style="width: 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;
            width: 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>

抱歉!评论已关闭.