jQuery Mobile的彈出窗口
彈出窗口類似於對話框，因為它們都覆蓋頁面的一部分。 當你想要顯示的小文本，圖片，地圖或其他內容一個彈出框會很有用。
要創建一個彈出，開始一個<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> 試一試» 全視線
缺省情況下，彈出窗口不必加入到他們的任何過渡效果。 您可以使用任何的效果，我們在“轉換”一章介紹。 只是應用的數據轉換=“value”屬性來打開彈出的鏈接：
所有可用的過渡效果演示
<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> 試一試» 注意：您也將學會如何在後面的章節形式和列表視圖中使用彈出窗口。