Thursday, November 20, 2008

ModalPopup in MasterPage

In aspx page, we can handle a ModalPopup to work by binding related target properties. If ModalPopup is in MasterPage, some engineers encountered problem on defining TargetControlID, OKControl or CancelControl, since these target controls are in the child page so that we can't bind the target control id to ModalPopup directly.

The solution of it is using FindControl in child page to bind TargetControlID on ModalPopup dynamically. But I don't think it is a convenient way.

Here, I suggest you use client behavior method to achieve it.

MasterPage:

<head runat="server">
    <title></title>
    <style>
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .modalPopup
        {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
            width: 250px;
        }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxtoolkit:toolkitscriptmanager runat="Server" id="ScriptManager1" >
        </ajaxtoolkit:toolkitscriptmanager>
        <script type="text/javascript">


            function showPopup() {
                var modalPopupBehavior = $find('programmaticModalPopupBehavior');
                modalPopupBehavior.show();

            }

            function hidePopup() {
                var modalPopupBehavior = $find('programmaticModalPopupBehavior');
                modalPopupBehavior.hide();

            }
        </script>
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
        <ajaxtoolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
            BehaviorID="programmaticModalPopupBehavior"
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="programmaticPopup"
            BackgroundCssClass="modalBackground"
            DropShadow="True" 
            RepositionMode="RepositionOnWindowScroll" >
        </ajaxtoolkit:ModalPopupExtender>

        <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:125px;width:225px;padding:10px">
            I'm the ModalPopup in MasterPage

            <input id="Button1" type="button" value="OK" onclick="hidePopup()" />
        </asp:Panel>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>

    </form>
</body>


Child Page:


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Button ID="Button1" runat="server" Text="I'm a Button in child page" OnClientClick="showPopup();return false;" />
</asp:Content>

10 comments:

Anonymous said...

Good idea!! thanks!!

shg said...

By total luck I tried using the ContentPlaceHolderID:controlID and it pops. I just can't figure out how to make the background grey out.

Vince Xu said...

To shg:
There is a css class you can define the style to make the background grey out. It is just an absolute position DIV.

Unknown said...

thanks for your opinion but, when we assign var with BehaviorID it gives javascript error found null value then i tried .
$find('ModulPop').show();
it works .

Vince Xu said...

To Mayank:

Please define correct BehaviorID property for ModalPopup, and assign it with $find method.

ilarius said...

Hello.

Thanks for your greate exsample, you saved me.

But now I have a Problem, when click my button i've got the next error: "Object Required ScriptResource.axd" and don't work...

have any idea?

Mark Abraham said...

Vince Xu,
Very good example of MasterPage - implemented modal pop-out. Thank you for your work.

Ilarious: Make sure that you've installed the AJAX toolkit, and have the correct version of the toolkit. You may want to test with Firebug for FF.

Also, the background color may not appear because the sample has an invalid hex color code (should be 3 or 6 hex letters/numbers).

Anonymous said...

almost 2 years and works, thanks a lot

V.S. Saini said...

To Mayank:

Might be you are using same code in master pages. So for that you can check the link:http://niitdeveloper.blogspot.com/2010/09/how-to-use-javascript-with-master-pages.html

Vinay Rane said...

Great post :)

Was trying to identify a way that would give me the following behavior.
A modalpopupextender in master-child scenario which covers the whole browser; infact the content of master page even.

Kudos!!!!!