jQuery mobile dialog 详情

//连接的方式打开对话框 这个比较简单
<a href="dialog.html" class="ui-btn mybtn" data-transition="pop">连接打开对话框</a>

//js的方式打开对话框 这个也不是很复杂
 <a href="#" class="ui-btn mybtn opendialogByjs" data-transition="pop">JS打开对话</a>
//绑定函数  页面 pageshow的时候

$( "#dialogPage" ).on( "pagecreate", function( event ) {

}).on("pageshow",function(){
var page = $(this);
//这里一定要记得unbind("click") 要不然一个页面可能会绑定多次
  page.find(".opendialogByjs").unbind("click").on("click",function(){
//加一个隐藏的a标签  a标签的href指向dialog.html
$('#dialogPage').append("<a id='tPushDialog' href='dialog.html' data-rel=\"dialog\"   style='display:none;'>Open dialog</a> ");
// 触发a标签的click事件
$("#tPushDialog").trigger('click');
});
});

<div data-role="page" data-dialog="true" id="dialogpage">

<div data-role="header" data-theme="b">
<h1>Dialog</h1>
</div>

<div role="main" class="ui-content">
<h1>标题</h1>
<p>弹出页内容<code>data-rel="dialog"</code> attribute.</p>
<a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">确定</a>
<a href="index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">取消</a>
</div>
</div>

//对话框可以动态关闭的  这是官方提供的方法  其实看源码就知道它的功能只是退回 也就是返回上一页
$("#dialogpage").dialog("close");

//dialog的声明周期与其他页面的生命周期一样pagebeforeload-pagebeforecreate-pagecreate-pageinit等 不再列举