上QQ阅读APP看书，第一时间看更新
4.7 另一种对话框
第4.5节介绍了一种利用JavaScript实现的对话框，但是随着jQuery Mobile新版本的出现，又有一些原生的对话框效果可供选择。
【范例4-11 一种新的对话框】
01 <! DOCTYPE html>
02
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta name="viewport" content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href="jquery.mobile.min.css" />
07 <script src="jquery-2.1.4.min.js"></script>
08 <script src="jquery.mobile.min.js"></script>
09 </head>
10 <body>
11 <div data-role="page">
12 <a href="#popupBasic" data-rel="popup" data-role="button">请点击按钮
</a>
13 <div data-role="popup" id="popupBasic"><! --data-role="popup"声明
一个对话框-->
14 <p>这是一个新的对话框</p> <! --对话框中的内容-->
15 </div>
16 </div>
17 </body>
18 </html>
运行后单击页面上的“请点击按钮”按钮，出现的样式如图4-12所示。
图4-12 新的对话框
本范例非常短小，可是却并不简单，首先它提前使用了“按钮”这一页面元素，其次是对话框的使用需要设置一些特殊的属性。
代码第13行包含属性data-role="popup"，它将div标签以及其中的内容声明为一个对话框的样式，通过属性id="popupBasic"为它设置了ID。再看代码第12行href="#popupBasic"，指定了该按钮的作用是打开id为popupBasic的对话框。另外为了使按钮能够打开对话框，还要给按钮加入属性data-rel="popup"。
提示
同样可以使用前面介绍过的data-transition来定义对话框弹出的样式。