Creating Dialog Box in jQuery Mobile - Part 4

This is my 4^th post of jQuery Mobile Series and in the first three posts, I had explained about Writing your first jQuery Mobile app, Creating Multiple jQuery Mobile Pages and Linking them and Prefetching and Caching jQuery Mobile Pages. And in this post, you will see how to create dialog box in jQuery mobile.

Let's Begin

Any page in jQuery mobile can be created as a dialog box. All you need to do is to apply data-rel="dialog" attribute 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.

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

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.

<a href="#dialog" data-rel="dialog">Open Dialog</a>

Open Dialog Demo

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.

Open Dialog Without Header Demo

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

<a href="dialog.html" 
   data-transition="flip" 
   data-rel="dialog">Open Dialog</a>

You can choose 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".

Dialog Transition Demo

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 with data-rel="back" attribute to close the dialog box and return to the previous page.

Close Button Demo

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.

Feel free to contact me for any help related to jQuery, I will gladly help you.

CodeProject