仅在移动设备浏览器中呈现时，我遇到了 ModalPopupExtender 的问题。我的应用程序要求用户通过点击/拖动选择一个时间段，当他们停止拖动时，会出现一个对话框以确认他们的时间选择。用户然后单击确定以注册时间或取消。问题是，当在移动浏览器中使用此页面时，用户向下滚动到标题的视图之外，选择时间，对话框打开（背景块）但停留在标题中（居中），因此需要用户向上滚动确认或取消。在 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=对话框；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”（扩展器中的行为 ID）对话框，其中包含值...
launchModal = function () {
$find('md').show();
};
我有一个尚未部署的“粘性”对话框扩展器，因为 AJaxControlKit ModalPopupExtender 锚，就像我说的那样，它在移动设备上不适合我。您是否建议使用 jquery UI 对话框“Sticky”扩展器来完成这项工作？它会解决我的锚问题吗？部署此扩展器的“最佳”方式是什么？我要完全删除 ModalPopupExtender 吗？
如果不是，您如何建议我将对话框锚定在单击位置，但允许用户滚动且对话框始终可见？谢谢你的帮助，克里斯