diff --git a/docs/api/data-attributes.html b/docs/api/data-attributes.html index 9ed5ab0fc1d..4d6c15e53c2 100644 --- a/docs/api/data-attributes.html +++ b/docs/api/data-attributes.html @@ -141,6 +141,14 @@
When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-rel="back" attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.
For JavaScript-generated links, you can simply set the href attribute to "#" and use the data-rel="back" attribute. You can also call the dialog's close() method to programmatically close dialogs, for example: $('.ui-dialog').dialog('close').
Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string of your choosing, or you can place the data attribute data-close-btn-text to configure the text from your markup.
By default dialogs are automatically given an icon only close button if the dialog has a header. Clicking this button triggers the dialogs close function and is identical to clicking the browsers back button. If you prefer to not have the close button or prefer to create your own there is a data attribute data-include-close-btn that configures if the button should be automatically added.
+ <div data-role="page" id="popup" data-include-close-btn="false">
+
+
+ Just like the page plugin, you can set a dialog's close button text through an option or data attribute. The option can be configured for all dialogs by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string of your choosing, or you can place the data attribute data-close-btn-text to configure the text from your markup. Additionally you can configure the icon position using the data-iconpos attribute. By default the iconpos attribute is set to "notext" and the button text will not be visible. Setting the iconpos to "none" will create a text only button.
+ <div data-role="page" id="popup" data-iconpos="left" data-close-btn-text="Nevermind">
+
+
Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.
diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 165be0d9379..c58b56b1c32 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -9,11 +9,13 @@ $.widget( "mobile.dialog", $.mobile.widget, { closeBtnText : "Close", overlayTheme : "a", initSelector : ":jqmData(role='dialog')" + iconpos : "notext", + includeCloseBtn : true }, _create: function() { var self = this, $el = this.element, - headerCloseButton = $( ""+ this.options.closeBtnText + "" ); + headerCloseButton = $( ""+ this.options.closeBtnText + "" ); $el.addClass( "ui-overlay-" + this.options.overlayTheme ); @@ -23,7 +25,7 @@ $.widget( "mobile.dialog", $.mobile.widget, { .addClass( "ui-dialog" ) .find( ":jqmData(role='header')" ) .addClass( "ui-corner-top ui-overlay-shadow" ) - .prepend( headerCloseButton ) + .prepend( this.options.includeCloseBtn ? headerCloseButton : "" ) .end() .find( ":jqmData(role='content'),:jqmData(role='footer')" ) .addClass( "ui-overlay-shadow" )