I've used a half dozen modal window plug-ins for jQuery and most have pretty extensive features and options. Somehow I tend to always come back to jQuery UI's dialog. They've done a pretty fair job at creating a versatile and customizable modal window feature. Any container can be turned into a modal window with a simple .dialog() method chained on. The problem that I ran into recently is that when you launch the dialog window, the only way to close is by doing one of the following:
So I began to analyze how I could do this easiest. Opening firebug I began to inspect the elements on the page, and remembered that the overlay that is laid over the rest of the browser window has a class called ui-widget-overlay. Then it hit me like a brick wall: Create an event handler to bind to all current and future overlay elements, and on click, close the dialog. Let's jump into the code:
If you noticed, I used the .live() method instead of the .bind() method to create the event handler. This is because the .ui-widget-overlay element does not exist initially (especially if we don't automatically open the dialog on document load). We can lazily live bind to the element to capture clicks on all existing and future elements. Now we can launch our dialog windows any way we want, and when we click outside of the dialog, it will close programmatically.
I am currently happily employed and not actively seeking employment at this time. While I appreciate any and all interest in my skill-set, I am currently not available for a full-time hire. If you are interested in my skill-set and would like to hire me on a part-time basis, please contact me.Contact Information
To avoid having my personal contact information floating freely through-out the internet, I have withheld my personal contact information from my resume. If you are interested in contacting me, please do so on my contact page.