# 創建對話框 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不會在歷史記錄的哈希值里包含對話框。這就意味著當點擊對話框后退按鈕時，他不會出現在你的瀏覽器歷史記錄里。比如說，如果你在一個頁面上，點擊了一個按鈕打開了一個對話框，然后關閉了這個對話框，到了另一個頁面。這時如果你點擊瀏覽器的后退按鈕，那你會回到第一個頁面，而不是對話框