jQuery Mobile 彈窗

彈窗是一個非常流行的對話框，彈窗可以覆蓋在頁面上展示。

彈窗可用於顯示一段文本，圖片，地圖或其他內容。

創建一個彈窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 屬性， <div> 元素添加 data-role="popup" 屬性。 接著我們為 <div> 指定 id， 然後設置 <a> 的 href 值為 <div> 指定的 id。 <div> 中的內容為彈窗顯示的內容。

注意: <div> 彈窗與點擊的 <a> 鏈接必須在同一個頁面上。

實例

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">顯示彈窗</a>

<div data-role="popup" id="myPopup">
  <p>這是一個簡單的彈窗</p>
</div>

如果你需要為彈窗添加內邊距與外邊距可以在 <div> 中添加 "ui-content" 類:

實例

<div data-role="popup" id="myPopup" class="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="#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>

過渡

默認情況下，彈窗是沒有過渡效果的。如果你需要你可以通過 data-transition="value" 屬性來添加過渡效果（jQuery Mobile 過渡）：

所有過渡效果實例

<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>

彈窗方向小邊框

如果需要添加彈窗方向小邊框，可以使用 data-arrow 屬性，並指定值 "l" (左邊), "t" (頂部), "r" (右邊) or "b" (底部):

實例

<a href="#myPopup" data-rel="popup" class="ui-btn">打開彈窗</a>

<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
  <p>左邊框的方向。</p>
</div>

彈窗對話框

你可以將彈窗製作為一個標準的對話框 (頭部, 內容和底部標記):

實例

<a href="#myPopupDialog" data-rel="popup" class="ui-btn">打開對話框彈窗</a>

<div data-role="popup" id="myPopupDialog">
  <div data-role="header"><h1>頭部文本..</h1></div>
  <div data-role="main" class="ui-content"><p>一些文本..</p><a href="#">一些鏈接..</a>
  <div data-role="footer"><h1>底部文本..</h1></div>
</div>

圖片彈窗

你可以在彈窗中顯示圖片:

實例

<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="/wp-content/uploads/2015/10/zaixian.jpeg" alt="zaixian" style="width:200px;"></a>

<div data-role="popup" id="myPopup">
  <img src="/wp-content/uploads/2015/10/zaixian.jpeg" style="width:800px;height:400px;" alt="zaixian">
</div>

彈窗背景覆蓋

你可以使用 data-overlay-theme 屬性在彈窗後添加背景顏色。

默認情況下覆蓋的背景色的透明的。使用 data-overlay-theme="a" 添加淺色背景，使用 data-overlay-theme="b" 添加深色的覆蓋背景：

實例

<a href="#myPopup" data-rel="popup">Show Popup</a>

<div data-role="popup" id="myPopup" data-overlay-theme="b">
  <p>在我身後有個深色背景。</p>
</div>

一般圖片彈窗經常使用背景覆蓋：

實例

<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="/wp-content/uploads/2015/10/zaixian.jpeg" alt="zaixian" style="width:200px;"></a>

<div data-role="popup" id="myPopup" data-overlay-theme="b">
  <img src="/wp-content/uploads/2015/10/zaixian.jpeg" style="width:800px;height:400px;" alt="zaixian">
</div>

注意： 在接下來的章節中，你將瞭解到如何在彈窗中使用表單。