In my daily life as a programmer I come across problems. This blog, is where I record them (and more importantly their solutions) so that I can dig them out in the future. I hope it might save others some problem solving time too.

Wednesday, May 18, 2011

A Custom Dialog Box in JQuery Tutorial

In the Jquery world, constructing a basic custom dialog box can be quite trivial. Using Jquery UI, creating a dialog box like the above can be done with this little snippet of code:

<div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div><script>$( "#dialog" ).dialog();</script>

Web development is easy right? Well in a perfect world yes, but as any developer will tell you there are two worlds: the ideal world, and the real world. JQuery UI is a fine toolkit when one is looking for a standard off the shelf styled widget, but not when something more custom is desired - even with help from the excellent Themeroller.

The recent Twitter UI redesign does everything it can to ensure users will use their browser's back button less. Many of the actions possible do not change the principle view for the user, but merely extend it. One such measure was the compose a tweet dialog box. The JQuery UI dialog widget won't give you a Twitter inspired dialog box - you have to create your own.

Analysis of the Twitter dialog box reveals the following:

Non modal - actions possible on the originating view

Fixed position - dialog box is fixed in center of window even as window scrolls

Dialog box has a simple structure, but the nature of opaque inheritance could cause some problems.

The dialog box really has a very simple structure, and the HTML required reflects this.

Note:The dialog-frame div is a sibling of the dialog-content div rather than being its parent. The reason for this is to accommodate a semi-transparent dialog frame. Once you reduce the opacity of an element, its children will automatically inherit this opacity. You cannot increase the opacity of an element from the value it has inherited.

Most of the work is in the javascript: you don't know the size of the user's browser window when writing your css, so you need to set dimensions and coordinates of the dialog box dynamically.