Creating Dialog Box in jQuery Mobile – Part 1

Let’s begin

Any page in jQuery mobile can be created as dialog box. All you need to do is to apply data-rel=”dialog” attribute to the to the page anchor link and jQuery mobile will do the rest. Remember the dialog should be a separate page div which you can load or include in your HTML.

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.

You can also create dialog with Multi-Page application. To know more about Single Page Template and Multi-Page Template, read Part 2.

In the demo, you should have noticed that dialog box has close button to close it. jQuery mobile framework works quite well here. If the dialog has a header the framework will also add a close button at the left side of the header. If no header, then no close button.

By default, the dialog will open with “popup” transition. But you can always change the transition using data-transition=”pop” attribute.

You can chose any transition method from “flip”, “fade”, “pop”, “turn”, “flow”, “slide”, “slidefade”, “slideup” and “slidedown”. To make it feel more dialog-like, jQuery Mobile recommends specifying a transition of “pop”, “slidedown” or “flip”.

When any link is clicked within the dialog then dialog gets closed automatically. But what if when there are no links in the dialog box? In that case, you can add a button in dialog withdata-rel=”back” attribute to close the dialog box and return to previous page.

Dialogs have a default width of 92.5% and a max-width of 500 pixels. There is also a 10% top margin to give dialogs larger top margin on larger screens. You can change this default behavior by modifying .ui-dialog-contain css class.