title: ModalPopupExtender Positioning on Mobile
body: <p>I've got an issue with the ModalPopupExtender when rendered in a mobile device browser only. My app requires that a user pick a timeslot by tapp/drag, when they stop dragging a dialog appears to confirm their time selection. The user then clicks ok to register a time or cancel. The problem is that when using this page in mobile browser, the user scrolls down out of view of the header, selects a time, dialog opens up (background blocks) but stays up in the header (centered) thus requiring the user to scroll up to confirm or cancel. I can confirm my scripts function when executing in MobiOne emulator &amp; all browsers not in mobile screen size. The dialog is locked at the top so I'm sure it's my css. Let me explain my setup...</p>
  
  <p>I use the WURFL library for device detection so each device has a .css section like this..</p>
  
  <pre><code>@media screen and (max-width: 320px) {
  /* styles: iPhone3 portrait, */
  
      .rPanel
      {
      background-color: red;
      border: 1px solid black;
      padding:4px 4px 4px 4px;    
      }
  }
  @media screen and (max-width: 480px) {
  /* styles: iPhone3 landscape, android nexus portrait*/
  
      .rPanel
      {
      background-color: green;
      border: 1px solid black;
      padding:4px 4px 4px 4px;    
      }
  }
  </code></pre>
  
  <p>Here is my panel and ModelPopupExtender. rPanel is the div=dialog; modalExt is the related extender...</p>
  
  <pre><code>&lt;asp:UpdatePanel ID="updatePanel" class="updatePanel" runat="server" UpdateMode="Conditional"&gt;
      &lt;ContentTemplate&gt;
          &lt;div runat="server" id="ruleViolationsMsg" class="rulePanel"&gt;
              &lt;asp:Label ID="ErrorHeader" runat="server" CssClass="ErrorHeader"&gt;&lt;/asp:Label&gt;
              &lt;br /&gt;
              &lt;asp:PlaceHolder ID="errorMsgControls" runat="server" /&gt;
          &lt;/div&gt;
          &lt;asp:Button ID="ruleModalBtn" runat="server" Style="display: none;" /&gt;
          &lt;asp:Button ID="ruleModalCloseBtn" runat="server" Text="" Style="display: none;" /&gt;
          &lt;div id="rPanel" class="rPanel" runat="server" style="display: none;"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;th id="tableTh" runat="server" colspan="2" class="tableTh"&gt;
                          Confirm Reservation
                      &lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;asp:Label ID="errorMsg" runat="server" Visible="false" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="selectedResource" class="label"&gt;
                              Resource:
                          &lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="selectedResource" runat="server" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="selectedDate" class="label"&gt;
                              Date:
                          &lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="selectedDate" runat="server"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="startTime" class="label"&gt;
                              Start Time:
                          &lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="startTime" runat="server" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="endTime" class="label"&gt;
                              End Time:
                          &lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="endTime" runat="server" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;                      
                      &lt;td&gt;
                          &lt;asp:Button ID="cancel" runat="server" Text="Cancel" CssClass="submit" OnClick="cancel_Click" /&gt;
                          &lt;asp:Button ID="reserve" runat="server" Text="Reserve" CssClass="submit" OnClick="reserve_Click" UseSubmitBehavior="true" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;asp:Button ID="progressBtn" runat="server" OnClientClick="progressBtn();" Style="display: none;" /&gt;
          &lt;asp:Button ID="progressCloseBtn" runat="server" Text="" CssClass="progressBtn" Style="display: none;" /&gt;
          &lt;div id="progressPanel" class="progressPanel" style="display: none"&gt;
              &lt;label class="progressText"&gt;
                  Please wait...&lt;/label&gt;
              &lt;div id="progress" class="progress"&gt;
              &lt;/div&gt;
              &lt;div id="progressDiag" class="progressDialog"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;asp:HiddenField ID="reservationStatus" Value="0" runat="server" /&gt;
          &lt;asp:ModalPopupExtender ID="progressModal" runat="server" TargetControlID="progressBtn"
              PopupControlID="progressPanel" BackgroundCssClass="modalPopup" CancelControlID="progressCloseBtn"
              BehaviorID="progressModal" &gt;
          &lt;/asp:ModalPopupExtender&gt;
          &lt;asp:GridView ID="reservegrid" runat="server" CssClass="reserveGrid" AutoGenerateColumns="true"
              OnRowDataBound="reservegrid_RowDataBound" HeaderStyle-CssClass="gridHeader" HorizontalAlign="center"&gt;
          &lt;/asp:GridView&gt;
          &lt;asp:HiddenField ID="sRes" runat="server" EnableViewState="true" /&gt;
          &lt;asp:ModalPopupExtender ID="modalExt" runat="server" TargetControlID="dummyModal"
              BackgroundCssClass="modalPopup" CancelControlID="dummyModal" PopupControlID="rPanel"
              BehaviorID="md" /&gt;
          &lt;asp:Button ID="dummyModal" runat="server" Text="" Style="display: none;" CausesValidation="false" /&gt;
          &lt;asp:HiddenField ID="rSelected" runat="server" /&gt;
          &lt;asp:HiddenField ID="rStart" runat="server" /&gt;
          &lt;asp:HiddenField ID="rEnd" runat="server" /&gt;
          &lt;asp:HiddenField ID="rLastSlot" runat="server" Value="0" /&gt;
          &lt;asp:HiddenField ID="rCompleted" runat="server" Value="0" /&gt;
      &lt;/ContentTemplate&gt;
      &lt;Triggers&gt;
          &lt;asp:AsyncPostBackTrigger ControlID="reserve" EventName="Click" /&gt;
          &lt;asp:AsyncPostBackTrigger ControlID="cancel" EventName="Click" /&gt;
          &lt;asp:AsyncPostBackTrigger ControlID="ruleModalBtn" EventName="Click" /&gt;
      &lt;/Triggers&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>After the user selects a timeslot and the values are loaded, my jquery calls launchModal()..</p>
  
  <pre><code> $('input[id$="rCompleted"]').val("0");
                              launchModal();
  </code></pre>
  
  <p>launchModal shows my 'md' (behaviorID in extender) dialog with values...</p>
  
  <pre><code>    launchModal = function () {
          $find('md').show();           
      };
  </code></pre>
  
  <p>I've got a "Sticky" dialog extender that I have yet to deploy because AJaxControlKit ModalPopupExtender anchors, like I said, its just not working for me on mobile. Do you recommend using a jquery UI Dialog "Sticky" extender to make this work? Will it fix my anchor problem? What is the "best" way to deploy this extender? Do i remove the ModalPopupExtender altogether? </p>
  
  <p>If not, how do you recommend I anchor the dialog at the click position, but yet allow the user to scroll with the dialog always being visible?
  THanks for your help,
  Chris   </p>