ModalPopupExtender在手机上的定位

Question

当ModalPopupExtender仅在移动设备浏览器中呈现时，我遇到了一个问题。我的应用程序要求用户通过tapp/拖动来选择一个时间段，当他们停止拖动时，会出现一个对话框来确认他们的时间选择。然后，用户单击ok以注册时间或单击cancel。问题是，当在移动浏览器中使用此页面时，用户向下滚动到标题的视线之外，选择一个时间，对话框打开(背景块)，但停留在标题中(居中)，从而要求用户向上滚动以确认或取消。在MobiOne模拟器中执行时，我可以确认我的脚本功能&所有浏览器都不是移动屏幕大小的。对话框被锁定在顶部，所以我确定它是我的css。让我解释一下我的设置。

我使用WURFL库进行设备检测，因此每个设备都有一个.css部分，如下所示。

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

这是我的面板和ModelPopupExtender。rPanel是div=dialog；modalExt是相关的扩展器...

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

在用户选择一个时隙并加载这些值之后，我的jquery调用launchModal()..

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

launchModal显示我的'md‘(扩展程序中的behaviorID)对话框...

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

我有一个“粘性的”对话框扩展器，我还没有部署，因为AJaxControlKit ModalPopupExtender锚点，就像我说的，它在移动设备上不能工作。您是否建议使用jquery UI Dialog "Sticky“扩展程序来实现此功能？它能解决我的锚点问题吗？部署这个扩展器的“最佳”方式是什么？我要完全删除ModalPopupExtender吗？

如果没有，你建议我如何将对话框锚定在单击位置，而又允许用户滚动对话框始终可见？THanks感谢你的帮助，克里斯

Answer 1

经过大量的搜索，我找到了我的问题的解决方案。ModalPopupExtender是用于互联网的，但并不是移动的，所以要使对话框正确定位，您必须执行以下操作。

在具有head和标签的页面上(我使用Mobile.Master页面)，在head部分添加以下脚本。确保将"var x= null；var y= null;“放在jquery代码块之外，以保持vars全局...

var x= null；var y= null；jQuery(function ($) { //将鼠标事件绑定到文档，以便我们//可以看到我们必须//使用哪种坐标。$(文档).click( function (event) { //客户端变量。//console.log("clientX/Y：“+ event.clientX + "，”+ event.clientY)；//页面变量。注意:这些是//由// jQuery事件对象官方支持的。console.log("pageX/Y：“+ event.pageX + "，”+ event.pageY)；x= event.pageX；y= event.pageY；//如果不居中//var offset = $('#updatePanel').offset()；//x = event.pageX - offset.left；//y = event.pageY - offset.top；})；});

1. 如果您正在使用面板或更新面板作为您的模式的父项，请分配一个将父项设置为“相对”定位的类……

asp:UpdatePanel ID="updatePanel“runat="server”CssClass="reserve_UpdatePanel“UpdateMode=”条件“

.reserve_UpdatePanel {

位置:相对；

}

• 在我的.aspx页面上，我在底部创建了一个“asp：

• ”(AjaxControlToolkit)标记，其中包含一些脚本。添加此脚本块。页面加载不适用于我，所以我在"Sys.Application“中初始化了我的"modalInit()”。确保将此行添加到script标记的顶部。"Sys.Application.add_load(modalInit);“。在"modalInit“中，我找到了我的ModalPopupExtender的behaviorId，然后在onload处向ModalPopupExtender添加了一个"onShowing()”。"onShowing()“接受我的模式"div”id (它是我的updatePanel的子项，也是扩展器的PopupControlId )，并通过使用在母版页中全局设置的鼠标事件坐标来设置位置，以覆盖ModalPopupExtender的默认坐标。长话短说，结果是对话框在您单击的位置打开。

Sys.Application.add_load(modalInit)；函数modalInit() { var modalPopup = $find('md')；modalPopup.add_shown(onShowing)；}函数onShowing() { $common.setLocation($get("<%=rPanel.ClientID %>")，new Sys.UI.Point(x，y))；}

Answer 2

你最好使用jQuery手机弹出窗口。它是1.1.2测试版的一部分，但很快就会发布。可以设置弹出窗口的来源、形态等。

我找不到1.1.2演示页面，但你可以看到demo of 1.2.0 pre。1.1.2的发布只需要几天的时间，你已经可以从jQuery Mobile download builder下载它了。