jQuery Mobile的弹出窗口
弹出窗口类似于对话框，因为它们都覆盖页面的一部分。 当你想要显示的小文本，图片，地图或其他内容一个弹出框会很有用。
要创建一个弹出，开始一个<a>元素和<div>元素。 添加data-rel="popup"属性<a> ，而data-role="popup"属性<div> 然后指定一个id <div>并设置href的<a>匹配指定的ID。 里面的内容<div>是实际的内容，当用户点击链接即会弹出。
注：弹出<div>必须是同一页面的链接中。
例
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> 试一试» 如果你想在弹出框中一些额外的填充和保证金，加入"ui-content"类<div>
关闭弹出窗口
默认情况下，弹出窗口可以通过点击弹出框外或按关闭"Esc"键。 如果你不想在弹出的是通过单击框外关闭的，你可以添加data-dismissible="false"属性，在弹出的（不是真的推荐）。 您还可以添加一个关闭按钮弹出，放在右边或左边。 这样做，添加与一个按钮链路data-rel="back"属性入弹出容器中，并通过CSS类定位的按钮。
| 描述 | 例 |
|---|---|
| 右键关闭按钮 | 尝试一下 |
| 左关闭按钮 | 尝试一下 |
| Undismissible弹出 | 尝试一下 |
定位弹出窗口
默认情况下，弹出窗口将直接出现在点击的元素。 控制弹出的位置，使用该数据位置到用来打开弹出的链接属性。
有定位弹出的三种方式：
| 属性值 | 描述 |
|---|---|
| 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> 试一试» 全视线
缺省情况下，弹出窗口不必加入到他们的任何过渡效果。 您可以使用任何的效果，我们在“转换”一章介绍。 只是应用的数据转换=“value”属性来打开弹出的链接：
所有可用的过渡效果演示
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> 试一试» 弹出箭头
为箭头添加到弹出窗口的边框，使用数据箭头的属性，并指定值"l" (left), "t" (top), "r" (right)和"b" (bottom) ：
例
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> 试一试» 弹出对话框
您可以添加标准的对话框标记成一个弹出（标题，内容和页脚标记）：
例
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> 试一试» 弹出照片
您还可以显示在弹出的图像：
例
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> 试一试» 注：弹出窗口是不理想的，当你有一整组要显示（像500张图片专辑）的图像。 然而，一对夫妇需要被视为较大的图像的 - 它们是完美的。
弹出覆盖
您可以控制弹出（页面本身）与后面的背景色data-overlay-theme属性。
默认情况下，覆盖层是透明的。 使用data-overlay-theme="a"添加光叠加和数据覆盖主题=“b”按钮添加一个黑暗的叠加：
例
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> 试一试» 叠加效应经常用于弹出的照片：
例
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> 试一试» 注意：您也将学会如何在后面的章节形式和列表视图中使用弹出窗口。