jQuery Mobile 彈窗
彈窗是一個非常流行的對話方塊，彈窗可以覆蓋在頁面上展示。
彈窗可用於顯示一段文字，圖片，地圖或其他內容。
建立一個彈窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上新增 data-rel="popup" 屬性， <div> 元素新增 data-role="popup" 屬性。 接著我們為 <div> 指定 id， 然後設定 <a> 的 href 值為 <div> 指定的 id。 <div> 中的內容為彈窗顯示的內容。
注意: <div> 彈窗與點選的 <a> 連結必須在同一個頁面上。
例項
<div data-role="popup" id="myPopup">
<p>這是一個簡單的彈窗</p>
</div>
嘗試一下 ?
如果你需要為彈窗新增內邊距與外邊距可以在 <div> 中新增 "ui-content" 類:
例項
嘗試一下 ?
關閉彈窗
預設情況下，點選彈窗之外的區域或按下 "Esc" 鍵即可關閉彈窗。 如果你不想點選彈窗之外的區域關閉彈窗可以在新增上新增 data-dismissible="false" 屬性（不推薦）。 你也可以在彈窗上新增關閉按鈕，按鈕上使用 data-rel="back" 屬性，並通過樣式來控制按鈕的位置。
| 描述 | 例項 |
|---|---|
| 右側關閉按鈕 | 嘗試一下 |
| 左側關閉按鈕 | 嘗試一下 |
| 使用 data-dismissible 屬性 | 嘗試一下 |
定位彈窗
預設情況下，彈窗會直接顯示在點選元素的上方，如果需要控制彈窗的位置，可以在用於開啟彈窗的點選連結上使用 data-position-to 屬性。
控制彈窗位置的三種方式：
| 屬性值 | 描述 |
|---|---|
| data-position-to="window" | 彈窗在視窗居中顯示 |
| data-position-to="#myId" | 彈窗顯示在知道的 #id 元素上 |
| data-position-to="origin" | 預設。彈窗顯示在點選的元素上。 |
例項
<a href=https://www.itread01.com/jquerymobile/"#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href=https://www.itread01.com/jquerymobile/"#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
嘗試一下 ?
過渡
預設情況下，彈窗是沒有過渡效果的。如果你需要你可以通過 data-transition="value" 屬性來新增過渡效果（jQuery Mobile 過渡）：
所有過渡效果例項
嘗試一下 ?
彈窗方向小邊框
如果需要新增彈窗方向小邊框，可以使用 data-arrow 屬性，並指定值 "l" (左邊), "t" (頂部), "r" (右邊) or "b" (底部):
例項
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>左邊框的方向。</p>
</div>
嘗試一下 ?
彈窗對話方塊
你可以將彈窗製作為一個標準的對話方塊 (頭部, 內容和底部標記):
例項
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>頭部文字..</h1></div>
<div data-role="main" class="ui-content"><p>一些文字..</p><a href=https://www.itread01.com/jquerymobile/"#">一些連結..
<div data-role="footer"><h1>底部文字..</h1></div>
</div>
嘗試一下 ?
圖片彈窗
你可以在彈窗中顯示圖片:例項
<img src=https://www.itread01.com/jquerymobile/"/wp-content/uploads/2015/10/itread01.jpeg" alt="itread01" style="width:200px;">
<div data-role="popup" id="myPopup">
<img src=https://www.itread01.com/jquerymobile/"/wp-content/uploads/2015/10/itread01.jpeg" style="width:800px;height:400px;" alt="itread01">
</div>
嘗試一下 ?
彈窗背景覆蓋
你可以使用 data-overlay-theme 屬性在彈窗後新增背景顏色。
預設情況下覆蓋的背景色的透明的。使用 data-overlay-theme="a" 新增淺色背景，使用 data-overlay-theme="b" 新增深色的覆蓋背景：
例項
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>在我身後有個深色背景。</p>
</div>
嘗試一下 ?
一般圖片彈窗經常使用背景覆蓋：
例項
<img src=https://www.itread01.com/jquerymobile/"/wp-content/uploads/2015/10/itread01.jpeg" alt="itread01" style="width:200px;">
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<img src=https://www.itread01.com/jquerymobile/"/wp-content/uploads/2015/10/itread01.jpeg" style="width:800px;height:400px;" alt="itread01">
</div>
嘗試一下 ?
注意： 在接下來的章節中，你將瞭解到如何在彈窗中使用表單。