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.

<div class="dialog">
<div class="dialog-frame">
<header>
<h1>Our first Dialog</h1>
</header>
</div>
<div class="dialog-content">
<p>A pleasure to open our first dialog with you</p>
</div>
</dialog>

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.

var dialog = $('.dialog') // cache the dialog element

// Initial dialog setup
var dialogFrameWidth = '10px'
dialog.css({position: 'fixed', padding:dialogFrameWidth})

// Set dialog coordinates
dialogHeight = dialog.outerHeight()
dialogWidth = dialog.outerWidth()
dialogTop = ($(window).height() - dialogHeight)/2
dialogLeft = ($(window).width() - dialogWidth)/2
dialogFrameWidth = "10px"
dialog.css({top: dialogTop, left: dialogLeft, position: fixed, padding:dialogFrameWidth}})

// Set coordinates and dimensions of dialog frame
dialogFrame = dialog.find('.dialog-frame')
dialogFrame.css({height: dialogHeight, width: dialogWidth, position: 'absolute', top: 0, left: 0, opacity: 0.8, z-index:1000}})

// Set coordinates and dimensions of dialog content
dialogFrameHeaderHeight = dialogFrame.find('header').outerHeight(true)
dialogContent = dialog.find('.dialog-content')
dialogContent.css({'margin-top': dialogFrameHeaderHeight, position: 'relative', top: 0, left: 0, z-index: 3000})


Add some style like background colors, fonts, etc. and your in business!

Credits:


http://twitter.com
http://jqueryui.com/demos/dialog/

2 comments:

  1. It is very nice post.It is good post. It is simple and best. It helpful for future use.You can test your knowledge in html by attending HTML Quiz .

    ReplyDelete
  2. can you explain how to create dialog with more than two buttons and edit text like that. kindly give the replay please

    ReplyDelete