创建一个弹出式窗口，给要弹出的内容 div 容器添加 data-role="popup" 属性。并且添加 id 属性值。然后创建一个超级链接，href的值即是此ID的值。并且给超级链接添加 data-rel="popup" 。当添加此超级链接的时候，jquery mobile框架会打开弹出内容层。这是一个类似的对话框控件的标记模式。一个弹出div层必须与嵌套超级链接在同一页面上的。
<a href="#popupBasic" data-rel="popup">Open Popup</a> <div data-role="popup" id="popupBasic"> <p> This is a completely basic popup, no options set.<p> </div>
弹窗由两部分组成：第一个是“屏幕”，这是一个透明或半透明的元素覆盖整个文档。第二个是“容器”，这是弹出层本身。如果你原来的元素有一个id属性，屏幕和容器将每个接收基于它的ID属性。屏幕上的ID将后缀“-screen”，与容器的ID将后缀“-popup”（在上面的例子分别是，id="popupBasic-screen" and id="popupBasic-popup"）
jquery mobile框架文本元素增加了少量的margin，此容器是一个空白页面，视觉效果只有一个圆角容器和阴影（这些功能可以通过选项来禁用）。
缩放图像：灯箱的例子
框架的CSS规则使弹窗中的子元素图片适合屏幕。由于对弹出的容器的绝对定位，在所有的浏览器中，图片的高度不调整屏幕高度。你可以使用一个简单的脚本，设置图片的最大高度来防止垂直滚屏。
<!DOCTYPE html> <html> <head> <title> Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script> <style> html, body { padding: 0; margin: 0; }html, .ui-mobile, .ui-mobile body { height: 585px;}.ui-mobile, .ui-mobile .ui-page { min-height: 585px;}.ui-content{padding:10px 15px 0px 15px;}</style> </head> <body> <div data-role="page" style="max-height:590px; min-height:590px;"> <div data-role="content" > <a href="#popupPhotoLandscape" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Photo landscape</a> <a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true" data-transition="fade"> Photo portrait</a> <div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a> <img src="photo-landscape.jpg" alt="Photo landscape"> </div> <div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a> <img src="photo-portrait.jpg" alt="Photo portrait"> </div> </div> </div> </body> </html> 
下面例子中，该处理程序绑定到popupbeforeposition事件，保证了图像不仅缩放，也重置了当窗口大小（如方向变化）。此代码示例中的高度降低了60，将顶部和底部的30像素的耐受性的考虑。
$( document ).on( "pageinit", function() {$( ".photopopup" ).on({popupbeforeposition: function() {var maxHeight = $( window ).height() - 60 + "px";$( ".photopopup img" ).css( "max-height", maxHeight );}});});弹窗中的框架
你可能需要一个iframe框架嵌入到一个弹窗中使用第三方插件。在这里，我们将展示一些真实世界的例子：视频和地图中的工作。
<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true"> Launch video player</a> <div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content"> <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless></iframe> </div>
当在弹窗内使用iframe框架的时候，设置宽度和高度属性值为0是很重要。这可以防止网页被截断，例如Android平台2.3。请注意，你要设置的属性，因为CSS设置宽度和高度是不足够的。你可以在HTML标记中设置实际的宽度和高度，防止浏览器中禁用了JavaScript和在pageinit事件中使用attr()设定零点值。
其次，结合到popupbeforeposition事件来设置iframe所需的尺寸时，弹出显示或窗口尺寸改变时（如改变方向）。对于iframe的例子在这个页面的自定义功能scale()用于减少iframe适应较小的屏幕。扩大下面查看此函数的代码。
function scale( width, height, padding, border ) {var scrWidth = $( window ).width() - 30,scrHeight = $( window ).height() - 30,ifrPadding = 2 * padding,ifrBorder = 2 * border,ifrWidth = width + ifrPadding + ifrBorder,ifrHeight = height + ifrPadding + ifrBorder,h, w;if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {w = ifrWidth;h = ifrHeight;} else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {w = scrWidth;h = ( scrWidth / ifrWidth ) * ifrHeight;} else {h = scrHeight;w = ( scrHeight / ifrHeight ) * ifrWidth;}return {'width': w - ( ifrPadding + ifrBorder ),'height': h - ( ifrPadding + ifrBorder )};};注：此功能是没有框架的一部分。复制代码到你的脚本中使用它。当弹出关闭的宽度和高度应重新设置为0。你可以通过结合到popupafterclose事件。
$( document ).on( "pageinit", function() {$( "#popupVideo iframe" ).attr( "width", 0 ).attr( "height", 0 );$( "#popupVideo" ).on({popupbeforeposition: function() {var size = scale( 497, 298, 15, 1 ),w = size.width,h = size.height;$( "#popupVideo iframe" ).attr( "width", w ).attr( "height", h );},popupafterclose: function() {$( "#popupVideo iframe" ).attr( "width", 0 ).attr( "height", 0 );}});});地图例子
在下例子中,一个iframe是用于显示谷歌地图API。使用iframe防止问题与控件的地图。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><script src="http://code.jquery.com/jquery-1.10.0.min.js"></script><script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script><style>html, body { padding: 0; margin: 0; }html, .ui-mobile, .ui-mobile body { height: 385px;}.ui-mobile, .ui-mobile .ui-page { min-height: 385px;}.ui-content{padding:10px 15px 0px 15px;}</style></head> <body> <div data-role="page" style="max-height:390px; min-height:390px;"> <div data-role="content"> <a href="#popupMap" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Open Map</a> <div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <iframe src="map.html" width="480" height="320" seamless></iframe> </div> </div> </div> </body> </html>
map.html页面源代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Map</title><script>function initialize() {var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );var myOptions = {zoom: 15,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP}var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );}</script><script src="http://maps.google.com/maps/api/js?sensor=false"></script><style>html {height: 100%;overflow: hidden;}body {margin: 0;padding: 0;height: 100%;}#map_canvas {height: 100%;}</style></head><body onload="initialize()"><div id="map_canvas"></div></body></html>iframe框架的大小设置与视频的例子，是完全一样的。有一个例外，像Android 2.3平台上，你也应该设置包含了地图div的宽度和高度，防止页面打破。在这个例子中，这个div的ID是#map_canvas
这是完整的脚本和链接打开地图弹出:
$( document ).on( "pageinit", function() { $( "#popupMap iframe" ) .attr( "width", 0 ) .attr( "height", 0 ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width" : 0, "height" : 0 } ); $( "#popupMap" ).on({ popupbeforeposition: function() { var size = scale( 480, 320, 0, 1 ), w = size.width, h = size.height; $( "#popupMap iframe" ) .attr( "width", w ) .attr( "height", h ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width": w, "height" : h } ); }, popupafterclose: function() { $( "#popupMap iframe" ) .attr( "width", 0 ) .attr( "height", 0 ); $( "#popupMap iframe" ).contents().find( "#map_canvas" ) .css( { "width": 0, "height" : 0 } ); } });});叠加面板
进一步，采取定制。这里是一个例子，一个弹窗，已经被定制，看起来像一个垂直面板，上面有三个迷你按钮：
<a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button">Open panel</a> <div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"> <button data-theme="a" data-icon="back" data-mini="true">Back</button> <button data-theme="a" data-icon="grid" data-mini="true">Menu</button> <button data-theme="a" data-icon="search" data-mini="true">Search</button> </div>
下面是使用CSS，风格这个面板,并将它附加到右边缘。注意,# popupPanel-popup是容器div的ID，有JQM框架生成。
#popupPanel-popup { right: 0 !important; left: auto !important;}#popupPanel { width: 200px; border: 1px solid #000; border-right: none; background: rgba(0,0,0,.5); margin: -1px 0;}#popupPanel .ui-btn { margin: 2em 15px;}因为弹出集装箱定位是绝对的,你不能把面板全高度与高度:100%;。这小脚本设置高度弹出的实际屏幕的高度。
$( "#popupPanel" ).on({ popupbeforeposition: function() { var h = $( window ).height(); $( "#popupPanel" ).css( "height", h ); }}); 0 0
