# 创建对话框 Creating dialogs 通过给指向页面的链接增加data-rel="dialog"的属性，可以把任何指向的页面表现对对话框。当应用了对话框的属性之后，qjmobile框架会给新页面增加圆角，页面周围增加margin，以及深色的背景，使得对话框浮在页面之上 **HTML 代码:** ``` <a href="foo.html" data-rel="dialog">Open dialog</a> ``` ## 对话框的转场 Transitions 因为Jquery Mobile里对话框也是一个标准的"page",所以他会以默认的slide转场效果打开。而且像其他的页面一样，你也可以通过给链接添加data-transition的属性指定对话框的转场效果。为了让对话框看起来效果更好，我们推?quot;pop", "slideup"，"flip"三种转场效果 **HTML 代码:** ``` <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a> ``` ## 关闭对话框 Closing dialogs 对话框内的任何链接被点击时，Jquery Mobile会自动关闭对话框，用回退效果转场到指向该对话框的页面。要在对话框内创建一?取消"按钮，只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用 对于js生成的链接，可以把链接的herf设为"#",添加data-rel="back"属性。也可以手动地调用对话框的close()方法关闭对话框，比如? $('.ui-dialog').dialog('close'). ## 设置关闭按钮的文字 Setting the close button text 就像页面插件一样，你可以设置程序或属性两种方法设置对话框关闭按钮的文字。程序的设置可以通过更改mobileinit绑定的事件，然后? $.mobile.dialog.prototype.options.closeBtnText 设置一个字符串。或者给标记代码增加  data-close-btn-text 属性来设置文字 ## 历史和后退按钮的行为 History & Back button behavior 因为对话框是典型地用来给页面起支持作用的，所以Jquery Mobile不会在历史记录的哈希值里包含对话框。这就意味着当点击对话框后退按钮时，他不会出现在你的浏览器历史记录里。比如说，如果你在一个页面上，点击了一个按钮打开了一个对话框，然后关闭了这个对话框，到了另一个页面。这时如果你点击浏览器的后退按钮，那你会回到第一个页面，而不是对话框