モバイル デバイスのブラウザーのみでレンダリングすると、ModalPopupExtender に問題が発生します。私のアプリでは、ユーザーがタップ/ドラッグしてタイムスロットを選択する必要があります。ドラッグを停止すると、時間の選択を確認するダイアログが表示されます。次に、ユーザーは [ok] をクリックして時刻を登録するかキャンセルします。問題は、このページをモバイル ブラウザーで使用する場合、ユーザーがヘッダーのビューから下にスクロールし、時間を選択すると、ダイアログが開きますが (背景ブロック)、ヘッダーにとどまる (中央にある) ため、ユーザーは上にスクロールする必要があります。確認またはキャンセルします。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」(extender の behaviorID) ダイアログに値を表示します...
launchModal = function () {
$find('md').show();
};
私が言ったように、AJaxControlKit ModalPopupExtenderアンカーがモバイルで機能しないため、まだ展開していない「スティッキー」ダイアログエクステンダーがあります。これを機能させるために、jquery UI ダイアログの「Sticky」エクステンダを使用することをお勧めしますか? アンカーの問題は解決しますか? このエクステンダーを展開する「最良の」方法は何ですか? ModalPopupExtender を完全に削除しますか?
そうでない場合、ダイアログをクリック位置に固定しながら、ユーザーがダイアログを常に表示した状態でスクロールできるようにする方法をお勧めしますか? 助けてくれてありがとう、クリス