GTS Joe GTS Joe - 1 year ago 135
Javascript Question

jQuery UI Dialog: Close when Click Outside

I have a jQuery UI Dialog. I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?

$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function(e) {
e.preventDefault();
$.ajax({
url: $('form.addEdit').attr('action'),
type: $('form.addEdit').attr('method'),
data: $('form.addEdit').serialize(),
open: function(){
$('.ui-widget-overlay').bind('click', function(){
$('div.deleteImageDialog').dialog('close');
})
},
success: function(html) { }
});
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});

});

Answer Source

Then you have to bind an event to the overlay.

$('input[name="delete-image"]').click(function(e){
    e.preventDefault();
    $("div.deleteImageDialog").dialog({
            // your code...
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
    $('.overlay_sector').bind( 'click', function() {
            $("div.deleteImageDialog").dialog('close');
            $('.overlay_sector').unbind();
    } )
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download