ModalPopupExtender控件属性、功能

ModalPopupExtender 控件功能描述

以模式窗口的方式弹出客户或服务器控件 , 以突出显示 ! 弹出的一般是 DIV 或 PANEL.

ModalPopupExtender控件属性描述

TargetControlID : 控制是否弹出的控件的 ID.（此控件点击将不会触发postbcak）。

  PopupDragHandleControlID : 允许拖拽的控件的 ID.

PopupControlID: 指定要弹出的控件的 ID.

BackgroundCssClass: 指定弹出控件后其它内容的样式 .

DropShadow: 弹出的控件是否有阴影效果

. OkControlID: 确认按钮的 ID.

OnOkScript : 单击［确认］按钮时要执行的脚本方法

CancelControlID : 取消按钮的

ID. OnCancelScript : 单击［取消］按钮时要执行的脚本方法 .

X,Y : 指定弹出层的位置 .

RepositionMode : 指示当页面窗口调整大小或滚动时, 弹出层是否要进行位置移动 .

示例代码

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .modalPopup
        {
            background-color: White;
            border: 2px solid silver;
             400px;
            height: 300px;
        }
        .modalPopuptitle
        {
            height: 45px;
            background: #ebebeb;
            position: relative;
            overflow: hidden;
             100%;
        }
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ajaxToolkit:ModalPopupExtender runat="server" PopupControlID="pnlSignUpPopup" ID="mdleEmailSignUp"
        CancelControlID="btnCancel" OkControlID="btnhidden" TargetControlID="btnshowmodel"
        PopupDragHandleControlID="pnlSignUpPopup" BackgroundCssClass="modalBackground">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Panel ID="pnlSignUpPopup" runat="server" CssClass="modalPopup">
        <div class="modalPopuptitle">
            <label style="height: 45px">
                User Login</label>
        </div>
        <div style="text-align: center; margin-top: 10px">
            <p>
                <asp:Label ID="labusername" runat="server" Text="User Name:" Width="100px"></asp:Label>
                <asp:TextBox runat="server" Height="28px" Style="margin-top: 0px; margin-bottom: 0px"
                    Width="193px"></asp:TextBox></p>
            <p>
                <asp:Label ID="labpassword" runat="server" Text="PassWord:" Width="100px"></asp:Label>
                <asp:TextBox runat="server" Height="28px" Style="margin-top: 0px; margin-bottom: 0px"
                    Width="193px" TextMode="Password">
                </asp:TextBox>
            </p>
            <p>
                <asp:Button runat="server" ID="btnhidden" Text="OK" />
                <asp:Button runat="server" ID="btnCancel" Text="Cancel" />
            </p>
        </div>
    </asp:Panel>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Button ID="btnshowmodel" runat="server" Text="show model" OnClick="bunshowmodal_Click" />
</asp:Content>