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="#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過渡 ):
彈窗方向小邊框
如果需要添加彈窗方向小邊框,可以使用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="#">一些鏈接..</a>
<div data-role="footer"><h1>底部文本..</h1></div>
</div>
嘗試一下»
圖片彈窗
你可以在彈窗中顯示圖片:實例
<img src="/wp-content/uploads/2015/10/w3big.jpeg" alt="w3big" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="/wp-content/uploads/2015/10/w3big.jpeg" style="width:800px;height:400px;" alt="w3big">
</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="/wp-content/uploads/2015/10/w3big.jpeg" alt="w3big" style="width:200px;"></a>
<div data-role="popup" id="myPopup" data-overlay-theme="b" >
<img src="/wp-content/uploads/2015/10/w3big.jpeg" style="width:800px;height:400px;" alt="w3big">
</div>
嘗試一下»
注意:在接下來的章節中,你將了解到如何在彈窗中使用表單。