免費(fèi)AI編程助手
jQuery Mobile 彈窗
彈窗是一個非常流行的對話框，彈窗可以覆蓋在頁面上展示。
彈窗可用于顯示一段文本，圖片，地圖或其他內(nèi)容。
創(chuàng)建一個彈窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 屬性， <div> 元素添加 data-role="popup" 屬性。 接著我們?yōu)?<div> 指定 id， 然后設(shè)置 <a> 的 href 值為 <div> 指定的 id。 <div> 中的內(nèi)容為彈窗顯示的內(nèi)容。
注意: <div> 彈窗與點擊的 <a> 鏈接必須在同一個頁面上。
實例
<div data-role="popup" id="myPopup">
<p>這是一個簡單的彈窗</p>
</div>
嘗試一下 ?
如果你需要為彈窗添加內(nèi)邊距與外邊距可以在 <div> 中添加 "ui-content" 類:
關(guān)閉彈窗
默認(rèn)情況下，點擊彈窗之外的區(qū)域或按下 "Esc" 鍵即可關(guān)閉彈窗。 如果你不想點擊彈窗之外的區(qū)域關(guān)閉彈窗可以在添加上添加 data-dismissible="false" 屬性（不推薦）。 你也可以在彈窗上添加關(guān)閉按鈕，按鈕上使用 data-rel="back" 屬性，并通過樣式來控制按鈕的位置。
| 描述 | 實例 |
|---|---|
| 右側(cè)關(guān)閉按鈕 | 嘗試一下 |
| 左側(cè)關(guān)閉按鈕 | 嘗試一下 |
| 使用 data-dismissible 屬性 | 嘗試一下 |
定位彈窗
默認(rèn)情況下，彈窗會直接顯示在點擊元素的上方，如果需要控制彈窗的位置，可以在用于打開彈窗的點擊鏈接上使用 data-position-to 屬性。
控制彈窗位置的三種方式：
| 屬性值 | 描述 |
|---|---|
| data-position-to="window" | 彈窗在窗口居中顯示 |
| data-position-to="#myId" | 彈窗顯示在知道的 #id 元素上 |
| data-position-to="origin" | 默認(rèn)。彈窗顯示在點擊的元素上。 |
實例
<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>
嘗試一下 ?
過渡
默認(rèn)情況下，彈窗是沒有過渡效果的。如果你需要你可以通過 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>
嘗試一下 ?
彈窗對話框
你可以將彈窗制作為一個標(biāo)準(zhǔn)的對話框 (頭部, 內(nèi)容和底部標(biāo)記):
實例
<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>
嘗試一下 ?
圖片彈窗
你可以在彈窗中顯示圖片:實例
<img src="/wp-content/uploads/2015/10/youj.jpeg" alt="W3CSchool" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="/wp-content/uploads/2015/10/youj.jpeg" style="width:800px;height:400px;" alt="W3CSchool">
</div>
嘗試一下 ?
彈窗背景覆蓋
你可以使用 data-overlay-theme 屬性在彈窗后添加背景顏色。
默認(rèn)情況下覆蓋的背景色的透明的。使用 data-overlay-theme="a" 添加淺色背景，使用 data-overlay-theme="b" 添加深色的覆蓋背景：
實例
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<p>在我身后有個深色背景。</p>
</div>
嘗試一下 ?
一般圖片彈窗經(jīng)常使用背景覆蓋：
實例
<img src="/wp-content/uploads/2015/10/youj.jpeg" alt="W3CSchool" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b">
<img src="/wp-content/uploads/2015/10/youj.jpeg" style="width:800px;height:400px;" alt="W3CSchool">
</div>
嘗試一下 ?
注意： 在接下來的章節(jié)中，你將了解到如何在彈窗中使用表單。
更多建議：