4.7　另一种对话框

第4.5节介绍了一种利用JavaScript实现的对话框，但是随着jQuery Mobile新版本的出现，又有一些原生的对话框效果可供选择。

【范例4-11　一种新的对话框】

运行后单击页面上的“请点击按钮”按钮，出现的样式如图4-12所示。

本范例非常短小，可是却并不简单，首先它提前使用了“按钮”这一页面元素，其次是对话框的使用需要设置一些特殊的属性。

代码第13行包含属性data-role="popup"，它将div标签以及其中的内容声明为一个对话框的样式，通过属性id="popupBasic"为它设置了ID。再看代码第12行href="#popupBasic"，指定了该按钮的作用是打开id为popupBasic的对话框。另外，为了使按钮能够打开对话框，还要给按钮加入属性data-rel="popup"。

图4-12　新的对话框