asked on

Using Modal Popup Extender with Master Page

Experts,

I have a content page that uses a master page. A change needs to be made so that when a button on the content page is clicked a panel control (that had an AJAX modal popup control added) is displayed.

I am new to ASP.NET and cannot get this to work. I have been able to get this to work on a page that was not associated with a Master page. I'm not even sure where the Script Manager needs to be placed in this instance.

Any assistance is appreciated.

Thank you.

Robb Hill

You place the script manager on the Master page then reference an instance of it for each and every conten page. Keep in mind only one per page.

You would reference this on a content page as such in C#. I can convert this to vb is you need me to.

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);

below is the code for the modal popup....replace your with your own if ya like.

<asp:Panel ID="Panel1" runat="server">
    <asp:Panel ID="pnlMessaggioPop" Style="display: none; text-align: center; vertical-align: middle;"
        runat="server" BackColor="#FFFFFF" BorderColor="#DB6939" Width="300" Height="150"
        BorderWidth="3">
        <br />
        <br />
        <asp:Label ID="lblMessagePop" Font-Size="Small" runat="server" Text="123" ForeColor="#DB6939"
            Font-Bold="true"></asp:Label>
        <br />
        <br />
        <asp:Button ID="btnYes" runat="server" Text="YES" />
        <asp:Button ID="btnNo" runat="server" Text="NO" />
    </asp:Panel>
    <asp:Button ID="btnDummyPopup" runat="server" Text="dummy" Style="display: " />
    <cc1:ModalPopupExtender ID="btnDummyPopup_ModalPopupExtender" runat="server" DynamicServicePath=""
        Enabled="True" TargetControlID="btnDummyPopup" PopupControlID="pnlMessaggioPop"
        BackgroundCssClass="modalBackground" OkControlID="btnYes" CancelControlID="btnNo">
    </cc1:ModalPopupExtender>

Open in new window

Robb Hill

put this in your master page header section:

<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>

ASKER CERTIFIED SOLUTION

Robb Hill

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jvoconnell

ASKER

robbhill - This worked perfectly!!!! You really bailed me out. Thanks for the help. I appreciate it!