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>

<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 過渡）：

如果需要添加彈窗方向小邊框，可以使用 data-arrow 屬性，并指定值

"l" (左邊), "t" (頂部), "r" (右邊) or "b" (底部):

<div data-role="popup" id="myPopup" class="ui-content"

data-arrow="l">

<p>左邊框的方向。</p>

你可以将彈窗制作為一個标準的對話框 (頭部, 内容和底部标記):

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

<div

data-role="header"><h1>頭部文本..</h1></div>

data-role="main" class="ui-content"><p>一些文本..</p><a href="#">一些連結..</a>

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

<img src="/wp-content/uploads/2015/10/runoob.jpeg"

alt="Runoob" style="width:200px;"></a>

<div data-role="popup"

id="myPopup">

<img src="/wp-content/uploads/2015/10/runoob.jpeg"

style="width:800px;height:400px;" alt="Runoob">

你可以使用 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>

一般圖檔彈窗經常使用背景覆寫：

id="myPopup"

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