Close Jquery UI dialog

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

by Oliver Kelso

HTML

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

JavaScript

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

});



jQuery(document).ready(function() {
    jQuery("#dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('#dialog').dialog('close');
            })
        }
    });
});