diff --git a/docs/pages/dialog-noclosebtn.html b/docs/pages/dialog-noclosebtn.html new file mode 100644 index 00000000000..51e441f4f9a --- /dev/null +++ b/docs/pages/dialog-noclosebtn.html @@ -0,0 +1,31 @@ + + + + + + jQuery Mobile Framework - Dialog Example + + + + + + + + + + +
+
+

Dialog

+
+ +
+

No close button

+

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

+ Ok, I get it +
+
+ + + + \ No newline at end of file diff --git a/docs/pages/dialog-rightclosebtn.html b/docs/pages/dialog-rightclosebtn.html new file mode 100644 index 00000000000..80d3f7d9d96 --- /dev/null +++ b/docs/pages/dialog-rightclosebtn.html @@ -0,0 +1,31 @@ + + + + + + jQuery Mobile Framework - Dialog Example + + + + + + + + + + +
+
+

Dialog

+
+ +
+

Right close button

+

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

+ Ok, I get it +
+
+ + + + \ No newline at end of file diff --git a/docs/pages/dialog/index.html b/docs/pages/dialog/index.html index 437b3994267..be1f47703b0 100644 --- a/docs/pages/dialog/index.html +++ b/docs/pages/dialog/index.html @@ -35,7 +35,7 @@

Dialog

  • Events
    • -

    Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. If the dialog has a header the framework will also add a close button at the left side of the header.

    +

    Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page. By default the framework will also add a close button if the dialog has a header.

    @@ -63,6 +63,11 @@

    Transitions

    Closing dialogs

    When any link is clicked within a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. Nevertheless, dialogs can also be chained, as explained below under "Chaining Dialogs". Similarly, a link that opens a popup will also leave the dialog in place.

    + +

    If the dialog has a header the framework will add a close button at the left side of the header. You can change the position by adding data-close-btn="right" to the dialog container. If you don't want a close button in the header or add a custom close button, you can use data-close-btn="none".

    + Right close button + No close button +

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