在
待发布的1.2版本中正如在官方博客中提到的增加了弹出框部件(Popups)，这个部件和对话框（Dialog）部件的不同之处就是在当前页面来创建一
个真正的弹出层来展示不同形态的信息，而不是通过跳转到一个新的页面来模拟弹出窗口的效果。这样我们将会有更多的空间来设计我们的应用交互效果。
创建一个弹出窗口部件
这个部件的实现方式和Dialog部件有些类似，同样包含两个部分来实现：
第一部分：触发元素的data-rel定义(data-rel=’popup’)和href中定义弹出层的id（和Dialog不同的是href中这能定义当前页面中的一个div层，而dialog则需要定义一个URL或者是当前页面中的一个page）
第二部分：弹出层，和触发元素在同一个page的div元素，并且需要定义data-role=’popup’和id。
例子:
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool">
<p>信息：这是一个Popup的例子，来源<a href="http://www.uedcool.com/" target="_blank">www.uedcool.com</a><p>
</div>
实际上这个部件只是实现了一个带有圆角和阴影的空白div层，你可以根据需要在这个层里面来添加需要的结构或者部件。
例如：
带有样式风格的弹出框
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" class="ui-content" data-theme="e" style="max-width:350px;">
<p>信息这是一个带有theme定义和最大宽度定义的弹出框 <strong>来源UEDcool</strong></p>
</div>
弹出菜单
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
<li data-role="divider" data-theme="a">弹出菜单</li>
<li><a href="#">文件</a></li>
<li><a href="#">选项</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
弹出表单
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>登录系统</h3>
<label for="un" class="ui-hidden-accessible">帐号:</label>
<input type="text" name="user" id="un" value="" placeholder="输入帐号" data-theme="a" />
<label for="pw" class="ui-hidden-accessible">密码:</label>
<input type="password" name="pass" id="pw" value="" placeholder="输入密码" data-theme="a" />
<button type="submit" data-theme="b">登录</button>
</div>
</form>
</div>
弹出窗口
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div data-role="popup" id="uedcool" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>文件删除</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">确定要删除这个文件吗？</h3>
<p>该操作不可撤销。</p>
<a
href="#" data-role="button" data-inline="true" data-rel="back"
data-transition="flow" data-theme="b">删除</a> <a href="#"
data-role="button" data-inline="true" data-rel="back"
data-theme="c">取消</a> </div>
</div>
弹出图片
程序代码
<a href="#uedcool" data-rel="popup">显示信息</a>
<div
data-role="popup" id="uedcool" data-overlay-theme="a"
data-corners="false"> <a href="#" data-rel="back"
data-role="button" data-theme="a" data-icon="delete"
data-iconpos="notext" class="ui-btn-right">Close</a><img
class="popphoto" src="http://www.uedcool.com/Plugins/aboutMe/Myface.jpg" alt="Photo landscape"> </div>
这个部件在jQueryMobile中会自动初始化，但是你也可以通过popup()方法来调用。
程序代码
$(‘#uedcool’).popup();
调用打开弹出框方法
除了通过一个带有data-rel=’popup’的链接来触发部件显示，还可以调用open方法来打开弹出框部件，如：
程序代码
$(‘#uedcool’).popup(‘open’);
关闭部件的方法
弹出框可以通过按Esc键或者点击弹出框外面的区域来关闭，除此之外也可以通过调用close方法来关闭，如：
程序代码
$(‘#uedcool’).popup(‘close’);
还可以通过在弹出框中添加关闭按钮的方式来调用关闭方法，只需要在关闭按钮或者链接中添加data-rel=’back’属性就可以通过点击来隐式调用关闭方法，例如：
程序代码
<div data-role="popup">
<a
href="#" data-rel="back" data-role="button" data-theme="a"
data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
这里显示内容
</div>
注：可以通过定义ui-btn-right或者ui-btn-left来控制按钮的显示位置。
部件容器内边距
建议在弹出框的的div上添加ui-content样式，这样可以使这个容器内内部定义一个15px的内边距，使容器的布局更加自然，如下:
程序代码
<div data-role="popup" id="popupPadded" class="ui-content">
<p>在容器上添加<code>ui-content</code> 样式</p>
</div>
在默认情况下，弹出框的中心点是和触发元素的中心点重合的（除在对边界位置进行修正的情况下），这样可以很方便的来实现菜单或者提示功能。
除此之外，可以通过在触发的链接上定义data-position-to来实现类似对话框或者lightbox风格在页面上居中的显示效果，例如：
弹出框的中心点与页面的中心点对应
程序代码
<div data-role="popup" id="uedcool">
<p>I am positioned to the window.</p>
</div>
<a href="#uedcool" data-rel="popup" data-position-to="window" />
弹出框的中心点与触发元素的中心点对应：
程序代码
<div data-role="popup" id="uedcool">
<p>I am positioned to the window.</p>
</div>
<a href="#uedcool" data-rel="popup" data-position-to="origin" />
除了以上window和origin这两个参数外，还可以在data-position-to属性中设置一个元素的id来使弹出框在该元素的位置显示。
