jQuery UI Dialog: Close when Click Outside

Question

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');
            }
        }
    });

});

When using modal=true this is not possible. Otherwise you have to bind a own click-event for the overlay. Try modal=false — AppGeer, Aug 02 '14 at 04:01
Tried your suggestion, and now the background image doesn't even come out, and if I click outside, the dialog still doesn't close. :( — GTS Joe, Aug 02 '14 at 04:08

AppGeer · Accepted Answer · 2015-04-26T10:27:26.730

4

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();
    } )
});

edited Apr 26 '15 at 10:27

answered Aug 02 '14 at 04:15

AppGeer

725
1
11
27

1

Your solution worked, thanks Kevin! Except I had to replace .overlay_sector to .ui-widget-overlay in order to match my code. – GTS Joe Aug 02 '14 at 06:57

score 2 · Answer 2 · edited May 23 '17 at 12:16

I had a similar problem. Went with a simpler code solution based on this thread's answer:

Use jQuery to hide a DIV when the user clicks outside of it

    $(document).mouseup(function (e)
    {
        var myDialog = $("#dialog-confirm");
        var container = $(".ui-dialog");

        if (myDialog.dialog( "isOpen" )===true) 
        {
            if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                myDialog.dialog( "close" );
            }
        }
    });

jQuery UI Dialog: Close when Click Outside

2 Answers2

Linked