KWPro.net

I've been working with jQuery's Modal Dialog box.  It's a nice little tool for making nice looking dialog boxes.  However, the documentation pretty much stinks and you have to search all over the place to figure things out for anything but trivial matters.  One such aspect is the little "x" mark that closes the dialog.  There's no documentation on how to modify it, outside of changing the CSS.  And even then, there's little information on it.  However, given that most people do silly things as you present more buttons and options, you would think that the designers for this feature would add an event specifically for it.

Uh uh.

jQuery UI's Modal Dialog box has you utilize a universal "close" even that you assign to a closure/function.  However, I found that this alone was insufficient for my needs because it binds to anything that closes the dialog box.  In theory then, you can have multiple events tied to this function.  That is nice if you don't want anything specific.  On the other hand. I needed a work around.  So if you ever need to trigger a custom event just for that little "x" button, here's what you need to do:

There's a css class associated to a link called "ui-dialog-titlebar-close".  You need to add a click event to it like:

$('.ui-dialog-titlebar-close').click(function(){ // custom stuff }

For instance, I needed to reset some stuff because I made the assumption that people cilcking on that button essentially were canceling their work.  The close event wasn't enough because I had other events that were not "cancel" events being tied and I could not distinguish the context easily.

Probably, the best solution should've been me adding another button that visibly says "cancel", but there's nothing outside of hiding the link to eliminate that button within the Modal Dialog API  So I just decided to combine both ideas together and simplify the work on my side.