Modal popup extender not displaying popup

Question

I have inherited some code using an ASP modal popup extender and for some reason it has now decided to stop working. Am I missing anything here? I'm not too fluent with AJAX / ASP.Net right now so im struggling to diagnose what is going wrong here.

So firstly the javascript method that displays the modal

 function ShowModalRemoveEvent(ID, EventID, InstructorID, InstructorName)
      {
         alert("Hi");
         var modal = $find('ModalPopupExtender1');
         modal.show();
         document.getElementById("txtID").value = ID;
         document.getElementById("txtEventID").value = EventID;
         document.getElementById("txtInstructorID").value = InstructorID;
         document.getElementById("txtInstructorName").value = InstructorName;
      }

I know this is being called because of the alert. So I would assume the prpblem is either in finding the ModalPopupExtender1 or the modal.show() line.

Here is the code for my modal popup extender

 <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
         <asp:Panel ID="Panel4" runat="server" Style="display: none" CssClass="ModalBackground">
            <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
                  <td width="7%" class="cellAlertHeader">
                     <img src="../../../images/Ops/window_delete.png" style="width: 18px; height: 18px" alt=""/>
                  </td>
                  <td width="93%" class="cellAlertHeader">
                     <b>Cancel Instructor Event</b>
                  </td>
               </tr>
            </table>
            <table width="100%">
               <tr>
                  <td width="5%">
                     &nbsp;<td width="95%">
                        &nbsp;
                        <asp:TextBox ID="txtID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
                        <asp:TextBox ID="txtEventID" Style="display: none" runat="server" CssClass="TextboxTitle"></asp:TextBox>
                     </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     <asp:TextBox ID="txtInstructorID" Style="display: none" runat="server" BorderStyle="None"
                        CssClass="TextboxTitle"></asp:TextBox>
                     <asp:TextBox ID="txtInstructorName" Style="font-size: 12px" runat="server" BorderStyle="None"
                        CssClass="TextboxTitle" BorderWidth="0"></asp:TextBox>
                  </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     &nbsp;
                  </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     <asp:Label ID="Label2" runat="server" Text="Are you sure you want to remove this Event?"
                        CssClass="TextboxTitle"></asp:Label>
                  </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     &nbsp;
                  </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     <asp:Button ID="ButtonConfirmRemove" runat="server" Text="Confirm" CssClass="buttonshort" />
                     <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" CssClass="buttonshort" />
                  </td>
               </tr>
               <tr>
                  <td width="5%">
                     &nbsp;
                  </td>
                  <td width="95%">
                     &nbsp;
                  </td>
               </tr>
            </table>
         </asp:Panel>
         <asp:Button runat="server" ID="dummyButton" Style="display: none" />
         <cc1:ModalPopupExtender ID="ModalPopupExtender1" 
                                 runat="server" 
                                 PopupControlID="Panel4"
                                 TargetControlID="dummyButton" 
                                 BackgroundCssClass="ModalBGOpacity" 
                                 CancelControlID="ButtonCancel"
                                 OnCancelScript="HideModalPopup()">
         </cc1:ModalPopupExtender>
      </ContentTemplate>
      <Triggers>
         <asp:AsyncPostBackTrigger ControlID="dummyButton" />
      </Triggers>
   </asp:UpdatePanel>

Answer 1

Try getting the rendered id of your control, like that.

 var modal = $find('<%=ModalPopupExtender1.CliendID%>');