Close Jquery UI dialog

Click anywhere outside the dialog on the overlay to close the dialog.

by chrisloughnane

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<div id="dialog">modal dialog</div>
<a href="#" id="open">Open dialog</a>

JavaScript

$('#open').click(function() {
    $('#dialog').dialog('open');

});



$(document).ready(function() {
    jQuery("#dialog").dialog({
                            autoOpen:false,
                            modal: true,
                            resizable: false,
                            draggable: false,
                            closeOnEscape: true,
                            position: ['center',20],
                            title: "Trazoo",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});