0
我在ModalPopupExtender僅在移動設備瀏覽器中呈現時遇到問題。我的應用程序要求用戶通過tapp/drag選擇一個時間段，當他們停止拖動對話框出現以確認他們的時間選擇。用戶然後單擊確定以註冊時間或取消。問題是，當在移動瀏覽器中使用此頁面時，用戶向下滾動查看標題，選擇時間，打開對話框（背景塊），但保持在標題（居中），因此要求用戶向上滾動確認或取消。在MobiOne仿真器&中執行MobiOne仿真器時，我可以確認我的腳本功能所有瀏覽器都不處於移動屏幕大小。該對話框鎖定在頂部，所以我確定這是我的CSS。讓我解釋一下我的設置...ModalPopupExtender在手機上定位
我使用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'（behaviorID在擴展器）對話框，值...
launchModal = function() {
$find('md').show();
};
我有「粘性」對話框擴展，我還沒有部署，因爲AJaxControlKit ModalPopupExtender錨，就像我說的，它只是不適合我的工作在移動。你建議使用jQuery UI對話框「粘滯」擴展器來使這項工作？它會解決我的錨問題嗎？什麼是部署這個擴展器的「最佳」方式？我完全刪除ModalPopupExtender嗎？
如果不是，您如何建議我將對話框定位在點擊位置，但是還允許用戶滾動顯示對話框始終可見？ 謝謝你的幫助， Chris