locked
Calling ModalPopupExtender from another User Control RRS feed

  • Question

  • User-281516340 posted

    I have three user controls. The controls are Window.ascx, Preview.ascx, Message.ascx. The Preview control displays in the Window's control iframe and the message displays on top of the preview.

    When btnClose button in the message.ascx control is clicked, I need to close everything. How can it be done?

    I tried registering Window.ascx in the Message.ascx then calling a public method from Window.ascx.cs with mpeNewWindowPopup.Hide(); But it did not work.

    Any ideas?

    Window.ascx

    <asp:UpdatePanel runat="server" ID="udpNewWindow">
        <ContentTemplate>
            <asp:Panel runat="server" ID="pnlNewWindowPopUp" Width="674" Height="500" style="display:none;">
                <asp:HiddenField runat="server" ID="hdfDummyNWPopup" />
                <div class="popup" style="padding: 0px 0px 10px 0px;">
                    <div style="float:left; background-color: #069; width: 100%;">
                        <div style="float: left; color: White; font-size: 17px; font-weight: bold; padding: 5px 0px 5px 5px;">
                         <asp:Label runat="server" ID="lblTitle" />
                        </div>
                        <div style="float:right;">
                            <asp:ImageButton runat="server" ID="imgClose" ImageUrl="~/images/closeX.png" AlternateText="Close" ToolTip="Close" OnClick="imgClose_Click" />                        
                        </div>
                    </div>
                    <br /><br />
                    <div>
                        <iframe runat="server" id="ifrmWindow" scrolling="auto" height="480px" width="670px" frameborder="0" />
                    </div>
                </div>            
            </asp:Panel>
    
            <asp:ModalPopupExtender ID="mpeNewWindowPopup" runat="server" PopupControlID="pnlNewWindowPopUp" BackgroundCssClass="modalBackground" RepositionMode="None" Y="30"
                                    DynamicServicePath="" Enabled="True" TargetControlID="hdfDummyNWPopup" DropShadow="false" />
        </ContentTemplate>
    </asp:UpdatePanel>

    Preview.ascx

    <body>
        <form id="form1" runat="server">
            <center>
                <asp:ToolkitScriptManager runat="server" ID="tsmPreview" />
                <asp:UpdatePanel runat="server" ID="udpPreview">
                    <ContentTemplate>
                        <uct:Message runat="server" ID="ctrMessage" />                                       
                        <div style="width: 100%; height: 30px; margin-top: 10px;">
                            <asp:Button runat="server" ID="btnEdit" Text="Edit" OnClick="btnEdit_Click" /> 
                            <asp:Button runat="server" ID="btnPost" Text="Post" OnClick="btnPost_Click" />  
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>          
            </center>
        </form>
    </body>

    Message.ascx

    <asp:UpdatePanel runat="server" ID="udpMessage">    
        <ContentTemplate>                       
            <asp:Panel runat="server" ID="pnlMessage" style="display:none;">                        
                <div class="popup" style="text-align:center;">
                    <div style="padding:10px; border: solid 1px #aaa;">
                        <asp:HiddenField runat="server" ID="hdfDummy" />
                        <asp:Label runat="server" ID="lblMsg" Font-Size="12px" /><br /><br />
                        <asp:Button runat="server" ID="btnClose" Text="OK" onclick="btnClose_Click" />
                    </div>
                </div>
            </asp:Panel>
            
            <asp:ModalPopupExtender ID="mpeMessage" runat="server" PopupControlID="pnlMessage" BackgroundCssClass="modalBackground"
                                    DynamicServicePath="" Enabled="True" TargetControlID="hdfDummy" DropShadow="true" />        
        </ContentTemplate>
    </asp:UpdatePanel>



    Friday, August 7, 2015 9:51 AM

Answers

  • User-281516340 posted

    Solved!

    var btnClose = parent.document.getElementById('ElementID');
    btnClose.click();
    return false;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2015 12:19 PM

All replies

  • User1724605321 posted

    Hi  VIC_TH0R ,

    When btnClose button in the message.ascx control is clicked, I need to close everything. How can it be done?

    You could hide the ModalPopupExtender from javascript :

    1.Assign a "BehaviourID" to the ModalPopupExtender using the "BehaviourID" attribute:

     <cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" BehaviorID="ModalBehaviour"
                TargetControlID="Button2"
                PopupControlID="Panel1"
                CancelControlID="Button3"
                OnCancelScript="onNo()"
                BackgroundCssClass="modalBackground">
            </cc1:ModalPopupExtender>

    2.Use the $find method to get a handle to the Modal Popup Behaviour and create hide method on the acquired handle:

        function closeInfo()
        {
            $find("ModalBehaviour").hide();
        }

    3. After that you could hide the ModalPopupExtender by any event like:

    <input id="Button1" type="button" value="close" onclick="closeInfo()" />

    Best Regards,

    Nan Yu

    Monday, August 10, 2015 2:21 AM
  • User-281516340 posted

    Hi Nan,

    I tried what you suggested, but no luck. Can you specify what goes where? Maybe I am placing it in the wrong place.

    Thanks,

    Victor.

    Monday, August 10, 2015 10:08 AM
  • User-281516340 posted

    Solved!

    var btnClose = parent.document.getElementById('ElementID');
    btnClose.click();
    return false;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 10, 2015 12:19 PM