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 @@

Dialog

data-title string (title used when page is shown) + + data-include-close-btn + true | false + + + data-iconpos + left | right | top | bottom | notext | none +

Content

diff --git a/docs/pages/page-dialogs.html b/docs/pages/page-dialogs.html index 73138f3bd54..d1ebfdc726f 100755 --- a/docs/pages/page-dialogs.html +++ b/docs/pages/page-dialogs.html @@ -52,10 +52,21 @@

Transitions

Closing dialogs

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').

- -

Setting the close button text

-

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.

- + +

The close button

+

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"> + + +

Setting the close button text and icon position

+

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"> + +

History & Back button behavior

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" )