Dialogs

Any page can be presented as a dialog by adding the data-rel="dialog" attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".

<a href="foo.html" data-rel="dialog">Open dialog</a>

Open dialog

Transitions

The dialog will still open with the standard slide transition so to make it feel more dialog-like. You can specify any page transition you want on the dialog by adding the data-transition attribute to the link. We recommend adding a transition of pop, slideup or flip for dialogs.

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Styling

Dialogs can be styled with different themes, just like any page. Here is a different dialog design:

Alternate swatch colors

By removing the header, dialogs can be can used to offer multiple buttons, more like a control sheet

Share photos...