Learning jQuery

This is my 4th post of jQuery Mobile Series and In first three Post, I had explained about Writing your first jQuery Mobile app, Create Multiple jQuery Mobile Pages and Link 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 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.

<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>

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.

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

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 with data-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.

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