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

Dialog

+
+ +
+

No rounded corners

+

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 ce0c6aa59da..437b3994267 100644 --- a/docs/pages/dialog/index.html +++ b/docs/pages/dialog/index.html @@ -82,6 +82,9 @@

Styling & theming

Dialogs can be styled with different theme swatches, just like any page by adding data-theme attributes to the header, content, or footer containers. Here is an example of a different dialog design:

An alternate color scheme +

By default dialogs have rounded corners. The option corners can be set to false by adding data-corners="false" to the dialog container:

+ No rounded corners +

Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the data-overlay-theme attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch "e":

Custom overlay swatch