0
모바일 장치 브라우저에서만 렌더링 할 때 ModalPopupExtender에 문제가 있습니다. 내 응용 프로그램은 사용자가 tapp/drag로 타임 슬롯을 선택해야합니다. 드래그를 멈추면 대화 상자가 나타나 시간 선택을 확인합니다. 그런 다음 사용자가 확인을 클릭하여 시간을 등록하거나 취소합니다. 문제는 모바일 브라우저에서이 페이지를 사용할 때 사용자가 헤더보기에서 아래로 스크롤하고 시간을 선택하면 대화 상자가 열리고 (배경 블록) 머리글에 가운데 머물러 있기 때문에 사용자가 위로 스크롤해야합니다. 확인 또는 취소 할 수 있습니다. 모바일 화면 크기가 아닌 모든 브라우저에서 MobiOne 에뮬레이터 &을 실행할 때 스크립트 기능을 확인할 수 있습니다. 대화 상자가 맨 위에 고정되어 있으므로 내 CSS라고 확신합니다. 각 장치가이 같은 .CSS 섹션을 가지고, 그래서 제가 장치 검색에 대한 WURFL 라이브러리를 사용하여 내 설치 ...ModalPopupExtender 모바일 위치 지정
을 설명하게 ..
@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;
}
}
<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은 (behaviorID 내 "(MD) 도시 값 확장) 대화 ...
launchModal = function() {
$find('md').show();
};
에 내가 말했듯이 AJaxControlKit ModalPopupExtender 앵커가, 그 그냥 모바일에 나를 위해 작동하지 않는 때문에 배포 아직는 "스티커"대화 익스텐더를 가지고있다. jquery UI 대화 상자 "고정"익스텐더를 사용하여이 작업을 수행 하시길 권장합니까? 내 앵커 문제를 해결할 수 있습니까? 이 증량제를 배치하는 "가장 좋은"방법은 무엇입니까? ModalPopupExtender를 모두 제거합니까?
그렇지 않은 경우 어떻게 대화 상자를 클릭 위치에 고정 시키지만 대화 상자가 항상 표시되도록 스크롤 할 수있게 할 것을 권장합니까? 도움을 주셔서 감사합니다. Chris