jQuery를 모바일 팝업
팝업은 모두 오버레이 페이지의 일부 점에서, 대화 상자와 비슷합니다. 당신이 작은 텍스트, 사진,지도 또는 기타 콘텐츠를 표시 할 때 팝업 상자가 유용 할 수 있습니다.
팝업을 생성하기 위해, 시작 <a> 요소와 <div> 요소입니다. 추가 data-rel="popup" 속성 <a> 하고 data-role="popup" 에 속성 <div> . 그런 다음에 대한 ID를 지정 <div> , 그리고 설정 href 의 <a> 지정된 ID와 일치 할 수 있습니다. 내용은 내부 <div> 사용자가 링크를 클릭 할 때 나타납니다 실제 내용입니다.
참고 : 팝업 <div> 링크와 같은 페이지 내에 있어야합니다.
예
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> »그것을 자신을 시도 당신이 당신의 팝업 상자에 몇 가지 여분의 패딩과 마진을하려면 추가 "ui-content" 클래스에 <div> :
팝업 닫기
기본적으로 팝업은 팝업 상자 외부를 클릭하거나 눌러 중 하나를 폐쇄 할 수있다 "Esc" 키를 누릅니다. 당신이 팝업 박스 바로 클릭하여 폐쇄 될하지 않으려면, 당신은 추가 할 수있는 data-dismissible="false" 팝업에 속성을 (정말 권장하지 않음). 또한 배치 중 하나를 오른쪽 또는 왼쪽, 팝업에 닫기 버튼을 추가 할 수 있습니다. 이렇게하려면와 버튼 링크 추가 data-rel="back" 팝업 용기에 속성을, 및 CSS 클래스에서 버튼을 놓습니다.
| 기술 | 예 |
|---|---|
| 오른쪽 닫기 버튼 | 시도 해봐 |
| 왼쪽 닫기 버튼 | 시도 해봐 |
| Undismissible 팝업 | 시도 해봐 |
위치 팝업
기본적으로 팝업이 클릭 된 요소 위에 직접 표시됩니다. 팝업의 위치를 제어하기 위해, 데이터 위치하는 팝업을 여는 데 사용되는 링크 속성을 사용합니다.
팝업 위치의 세 가지 방법이 있습니다 :
| 속성 값 | 기술 |
|---|---|
| data-position-to="window" | 팝업 창에서 중앙에 나타날 |
| data-position-to="#myId" | 팝업은 지정된 #ID와 요소 위에 위치 |
| data-position-to="origin" | 태만. 팝업은 클릭 된 요소 바로 위에 위치 |
예
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> »그것을 자신을 시도 전환
기본적으로 팝업 그들에 추가 된 전환 효과가 없습니다. 당신은 우리가 "전환"장에서 소개하는 효과 중 하나를 사용할 수 있습니다. 그냥 팝업을 여는 링크로 데이터 전환 = "값"속성을 적용
가능한 모든 전환 효과의 데모
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> »그것을 자신을 시도 팝업 화살표
데이터 화살표 속성을 사용, 팝업의 경계에 화살표를 추가하고 값을 지정하려면 "l" (left), "t" (top), "r" (right) 또는 "b" (bottom) :
예
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> »그것을 자신을 시도 팝업 대화 상자
당신은 팝업 (헤더, 콘텐츠 및 바닥 글 마크 업)에 표준 대화 마크 업을 추가 할 수 있습니다 :
예
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> »그것을 자신을 시도 팝업 사진
또한 팝업에 이미지를 표시 할 수 있습니다 :
예
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> »그것을 자신을 시도 참고 : 당신은 당신이 (500 이미지 앨범 등) 표시 할 이미지의 전체 집합이있을 때 팝업 적합하지 않습니다. 그러나 더 큰 볼 필요가 이미지의 몇 - 그들은 완벽하다.
팝업 오버레이
당신은과 팝업 (페이지 자체) 뒤의 배경 색상을 제어 할 수 있습니다 data-overlay-theme 속성을.
기본적으로 오버레이가 투명하다. 사용 data-overlay-theme="a" 어두운 오버레이를 추가하는 빛 오버레이 및 데이터 오버레이 테마 = "B"를 추가합니다 :
예
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> »그것을 자신을 시도 오버레이 효과는 종종 팝업 사진에 사용된다 :
예
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> »그것을 자신을 시도 참고 : 나중에 장에서 양식 및 목록보기에 팝업을 사용하는 방법을 배우게됩니다.