How do you hide a ModalPopupExtender embedded in an ASCX user control with no postback (through javascript )?

Question

I have an Asp.net application. Within that application I have a ModalPopupExtender embedded within an ASCX user control. I would like to be able to wire up a cancel button so I can hide the popup when user presses cancel without doing a post back.

Here is what I have so far:

<cc1:ModalPopupExtender ID="PopupExtender1" runat="server" PopupControlID="pnlPopup" BehaviorID="mdlPopupForm"
TargetControlID="btnHiddenSubmit" OkControlID="btnOkay" CancelControlID="btnCancel" 
Drag="true" PopupDragHandleControlID="PopupHeader" EnableViewState="true" 
BackgroundCssClass="modalBackground" ClientIDMode="Static" />

Here is the HTML for btnCancel

<input type="button" id="btnCancel" onclick="cancelPopupPanelClick()" value="Cancel" />

Here is the javascript:

   function cancelPopupPanelClick() {

    alert('CancelEventFired');
    var modalPopup = $find('PopupExtender1');
    if (modalPopup != null) {
        modalPopup.hide();
    }
}

The event fires fine. The issue I'm having is that I can't "Find" the modalPopup in order to hide it. Is this complicated by the fact that I have the ModalPopupExtender embedded in an ASCX control?

I have verified that the "AjaxControlToolkit.ToolkitScriptManager" is loaded in the containing ASPX page.

Can someone get me pointed in the right direction?

Thanks, JohnB

Answer 1

You're using invalid selector, try this:

var modalPopup = $('#PopupExtender1');