Search code examples
javascriptvb.netfunctionshowmodalpopupextender

Why won't my ModalPopupExtender show? ASP.NET & javascript


I'm trying to call a modal popup extender from javascript. Here's the call:

function MyFunction()
   {alert("test");
   $find('mdlPassword').show;}

I get the alert when it's called, but the modal popup extender won't show. Here's the aspx stuff:

<!-- Popup Extenders Should Go Here -->
<asp:button id="Button1" runat="server" text="Button" style="display: none;" />
<asp:ModalPopupExtender ID="mdlPassword" runat="server"
    targetcontrolid="Button1" popupcontrolid="pnlPassword" 
    popupdraghandlecontrolid="PopupHeader" drag="true">
</asp:ModalPopupExtender>

<asp:Panel ID="pnlPassword" style="display: none" runat="server">
<div class="PasswordPopup">
            <div id="PopupHeader">&nbsp;</div>
            <div class="Controls">
                <center><table><tr>
                    <td>Please enter your password:</td><td><input type="password" name="Password" /></td></tr>
                <tr><td>&nbsp;</td>
                    <td><asp:linkbutton id="btnOK" runat="server" text="OK" />&nbsp;&nbsp;<asp:linkbutton id="btnCancel" runat="server" text="Cancel" /></td></tr></table></center>
            </div>
 </div>
</asp:Panel>

Any ideas?

Thanks,

Jason


Solution

  • Try to define the ModalPopupExtender's BehaviorID:

    <asp:ModalPopupExtender ID="mdlPassword" runat="server"
        BehaviorID="mdlPassword"
        targetcontrolid="Button1" popupcontrolid="pnlPassword" 
        popupdraghandlecontrolid="PopupHeader" drag="true">
    </asp:ModalPopupExtender>
    

    BehaviorID: In cases where you would like to access the client-side behavior for your extender from script code in the client, you can set this BehaviorID to simplify the process.

    The script for showing and hiding the popup:

    <script language="javascript">
       function showPopup()
       {
           $find('mdlPassword').show();
       }
       function hidePopup()
       {
           $find('mdlPassword').hide();
       }
    </script>