对话框

使用data-rel属性可以方便地创建弹出式对话框，以下代码将会以对话框形式加载dialog.html页面：

a href="dialog.html" data-rel="dialog">Open dialog</a>

对话框中footer是可选的，但是你必须包括header，因为如果没有header，将无法显示自动生成的对话框关闭按钮。

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<div data-role="page">

   <div data-role="header">

      <h1>Dialog Box</h1>

   </div><!-- /header -->

<div data-role="content">   

<!-- 使用data-rel属性可以方便地创建弹出式对话框-->

   <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a> 

</div><!-- /content -->

<div data-role="footer">

   <h4>Page Footer</h4>

</div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="dialogPopUp">

   <div data-role="header">

      <h1>Dialog Title</h1>

   </div><!-- /header -->

   <div data-role="content">   

      This is a dialog box      

   </div><!-- /content -->

<!--对话框中footer是可选的，但是你必须包括header，因为如果没有header，将无法显示自动生成的对话框关闭按钮。-->

<div data-role="footer">

<h4>Additional Footer information</h4>

</div><!-- /footer -->

</div><!-- /page -->