title: ASP.NET: ModalPopupExtender prevents button click event from firing
body: <p>Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:</p>
  
  <ol>
  <li>Display a ModalPopup to prevent the user from pressing any buttons or changing values</li>
  <li>Call my code behind method, hiding the ModalPopup when finished</li>
  </ol>
  
  <p>Here is the ASP markup:</p>
  
  <pre><code>&lt;asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
      UpdateMode="Always"&gt;
      &lt;Triggers&gt;
          &lt;asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" /&gt;
      &lt;/Triggers&gt;
      &lt;ContentTemplate&gt;
          &lt;asp:Panel ID="pnlHidden" runat="server" style="display: none;"&gt;
              &lt;div&gt;
              &lt;h1&gt;Saving...&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/asp:Panel&gt;
          &lt;cc1:ModalPopupExtender ID="modalPopup"
              BackgroundCssClass="modalBackground" runat="server"
              TargetControlID="btnSaveData" PopupControlID="pnlHidden"
              BehaviorID="ShowModal"&gt;
          &lt;/cc1:ModalPopupExtender&gt;
          &lt;asp:Button ID="btnSaveData" runat="server" Text="Save Data"
              OnClick="btnSaveData_Click" /&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>Now, here is my code behind C# code:</p>
  
  <pre><code>protected void btnSaveData_Click(object sender, EventArgs e)
  {
     UpdateUserData(GetLoggedInUser());
     modalPopup.Enabled = false;
  }
  </code></pre>
  
  <p>Why doesn't this work?  The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.</p>
  
  <p><strong>UPDATE:</strong>  The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:</p>
  
  <pre><code>function showOverlay() {
      var popup = $find('modalPopup');
      popup.show();
  }
  </code></pre>
  
  <p>popup is ALWAYS equal to null.</p>
  
  <p><strong>FINAL UPDATE:</strong>  This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick):</p>
  
  <pre><code>&lt;asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
  UpdateMode="Always"&gt;
  &lt;Triggers&gt;
      &lt;asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" /&gt;
  &lt;/Triggers&gt;
  &lt;ContentTemplate&gt;
      &lt;asp:Panel ID="pnlHidden" runat="server" style="display: none;"&gt;
          &lt;div&gt;
          &lt;h1&gt;Saving...&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/asp:Panel&gt;
      &lt;cc1:ModalPopupExtender ID="modalPopup"
          BackgroundCssClass="modalBackground" runat="server"
          TargetControlID="hdnField" PopupControlID="pnlHidden"
          BehaviorID="ShowModal"&gt;
      &lt;asp:HiddenField ID="hdnField" runat="server" /&gt;
      &lt;/cc1:ModalPopupExtender&gt;
      &lt;asp:Button ID="btnSaveData" runat="server" Text="Save Data"
          OnClientClick="showModal();" OnClick="btnSaveData_Click" /&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>Using this Javascript function:</p>
  
  <pre><code>function showModal() { $find('ShowModal').show(); }
  </code></pre>
  
  <p>... And this code behind:</p>
  
  <pre><code>protected void btnSaveData_Click(object sender, EventArgs e)
  {
     UpdateUserData(GetLoggedInUser());
     modalPopup.hide();
  }
  </code></pre>