Latest web development tutorials

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/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" 添加深色的覆蓋背景:

實例

<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/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>

嘗試一下»

注意:在接下來的章節中,你將了解到如何在彈窗中使用表單。