Question

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 & 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…

I use the WURFL library for device detection so each device has a .css section like this..

@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;    
    }
}

Here is my panel and ModelPopupExtender. rPanel is the div=dialog; modalExt is the related extender…

<asp:UpdatePanel ID="updatePanel" class="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div runat="server" id="ruleViolationsMsg" class="rulePanel">
            <asp:Label ID="ErrorHeader" runat="server" CssClass="ErrorHeader"></asp:Label>
            <br />
            <asp:PlaceHolder ID="errorMsgControls" runat="server" />
        </div>
        <asp:Button ID="ruleModalBtn" runat="server" Style="display: none;" />
        <asp:Button ID="ruleModalCloseBtn" runat="server" Text="" Style="display: none;" />
        <div id="rPanel" class="rPanel" runat="server" style="display: none;">
            <table>
                <tr>
                    <th id="tableTh" runat="server" colspan="2" class="tableTh">
                        Confirm Reservation
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="errorMsg" runat="server" Visible="false" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="selectedResource" class="label">
                            Resource:
                        </label>
                    </td>
                    <td>
                        <asp:Label ID="selectedResource" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="selectedDate" class="label">
                            Date:
                        </label>
                    </td>
                    <td>
                        <asp:Label ID="selectedDate" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="startTime" class="label">
                            Start Time:
                        </label>
                    </td>
                    <td>
                        <asp:Label ID="startTime" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="endTime" class="label">
                            End Time:
                        </label>
                    </td>
                    <td>
                        <asp:Label ID="endTime" runat="server" />
                    </td>
                </tr>
                <tr>                      
                    <td>
                        <asp:Button ID="cancel" runat="server" Text="Cancel" CssClass="submit" OnClick="cancel_Click" />
                        <asp:Button ID="reserve" runat="server" Text="Reserve" CssClass="submit" OnClick="reserve_Click" UseSubmitBehavior="true" />
                    </td>
                </tr>
            </table>
        </div>
        <asp:Button ID="progressBtn" runat="server" OnClientClick="progressBtn();" Style="display: none;" />
        <asp:Button ID="progressCloseBtn" runat="server" Text="" CssClass="progressBtn" Style="display: none;" />
        <div id="progressPanel" class="progressPanel" style="display: none">
            <label class="progressText">
                Please wait...</label>
            <div id="progress" class="progress">
            </div>
            <div id="progressDiag" class="progressDialog">
            </div>
        </div>
        <asp:HiddenField ID="reservationStatus" Value="0" runat="server" />
        <asp:ModalPopupExtender ID="progressModal" runat="server" TargetControlID="progressBtn"
            PopupControlID="progressPanel" BackgroundCssClass="modalPopup" CancelControlID="progressCloseBtn"
            BehaviorID="progressModal" >
        </asp:ModalPopupExtender>
        <asp:GridView ID="reservegrid" runat="server" CssClass="reserveGrid" AutoGenerateColumns="true"
            OnRowDataBound="reservegrid_RowDataBound" HeaderStyle-CssClass="gridHeader" HorizontalAlign="center">
        </asp:GridView>
        <asp:HiddenField ID="sRes" runat="server" EnableViewState="true" />
        <asp:ModalPopupExtender ID="modalExt" runat="server" TargetControlID="dummyModal"
            BackgroundCssClass="modalPopup" CancelControlID="dummyModal" PopupControlID="rPanel"
            BehaviorID="md" />
        <asp:Button ID="dummyModal" runat="server" Text="" Style="display: none;" CausesValidation="false" />
        <asp:HiddenField ID="rSelected" runat="server" />
        <asp:HiddenField ID="rStart" runat="server" />
        <asp:HiddenField ID="rEnd" runat="server" />
        <asp:HiddenField ID="rLastSlot" runat="server" Value="0" />
        <asp:HiddenField ID="rCompleted" runat="server" Value="0" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="reserve" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="cancel" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="ruleModalBtn" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

After the user selects a timeslot and the values are loaded, my jquery calls launchModal()..

 $('input[id$="rCompleted"]').val("0");
                            launchModal();

launchModal shows my ‘md’ (behaviorID in extender) dialog with values…

    launchModal = function () {
        $find('md').show();           
    };

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?

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

Answer 1

After a ton of searching I found a solution to my problem. The ModalPopupExtender is meant for internet but not so much mobile so to get the dialog to position properly you must do the following..

1. On your page that has head and form tags (I use Mobile.Master page) add the following script in the head section. Make sure you keep “var x = null; var y = null;” outside of the jquery block to keep the vars global…

   var x = null;
   var y = null;

   jQuery(function ($) {
   
       // Bind the mouse event to the document so that we
       // can see what kind of coordinates we have to play
       // with.
       $(document).click(
           function (event) {
   
               // Client variables.
   
               //console.log("clientX/Y: " + event.clientX + ", " + event.clientY);
   
               // Page variables. NOTE: These are the ones
               // that are officially supported by the
               // jQuery Event object.
   
               console.log("pageX/Y: " + event.pageX + ", " + event.pageY);
   
               x = event.pageX;
               y = event.pageY;
   
               //try this if its not centering
               //var offset = $('#updatePanel').offset();
               //x = event.pageX - offset.left;
               //y = event.pageY - offset.top;
   
           });
       });
   

2. If youre using a panel or update panel as the parent of your modal, assign a class that sets the parent to “relative” positioning…

   asp:UpdatePanel ID=”updatePanel” runat=”server” CssClass=”reserve_UpdatePanel” UpdateMode=”Conditional”

   .reserve_UpdatePanel
   {
   position: relative;
   }

3. On my .aspx page I’ve created an “asp:content” (AjaxControlToolkit) tag at the bottom that holds some scripts. Add this script block. Page load didnt work for me so I initialized my “modalInit()” in the “Sys.Application”. Make sure you add this line at the top of the script tag. “Sys.Application.add_load(modalInit);”. In the “modalInit”, I’m finding the behaviorId of my ModalPopupExtender and then I add an “onShowing()” to the ModalPopupExtender at the onload. The “onShowing()” takes my modal “div” id (which is a child of my updatePanel and is the PopupControlId of the extender) and does a setlocation to override the default coordinates of the ModalPopupExtender by using the mouseevent coordinates set globally in my Master page. Long story short, the result is the dialog opens up where you click.

   Sys.Application.add_load(modalInit);

   function modalInit() {
       var modalPopup = $find('md');
       modalPopup.add_shown(onShowing);
   }
   
   function onShowing() {
   
       $common.setLocation($get("<%=rPanel.ClientID %>"), new Sys.UI.Point(x, y));
   }