jQuery Modal Dialog Close on Overlay Click

You may want a modal dialog to close if the overlay is clicked on the page. One way of doing that is to use the jquery live function or, for after jquery 1.7, use the jquery on function.

Incidentally, you could use an overlay click event if the dialog is set to autoOpen: true, the default value of the dialog, and you do not open the dialog again with an event.

$(".ui-widget-overlay").click (function () {
    $("#dialog-id").dialog( "close" );
});

If you open the dialog with an event like ‘click’ at any point whether autoOpen is set to true or false, then use jQuery.live or jQuery.on.

Click Event Overlay Close

Fiddle demonstrating successful overlay click event with autoOpen: true and no click event to open dialog: http://jsfiddle.net/GKfZM/2/

Fiddle demonstrating failure of overlay click event with autoOpen: false and click event to open dialog: http://jsfiddle.net/GKfZM/189/

Live Event (jquery 1.6 or earlier)

Fiddle demonstrating how ‘live’ works (jquery 1.6 or earlier) with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/190/

On Event (jquery 1.7 or later)

Fiddle demonstrating how ‘on’ works (jquery 1.7 or later) with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/191/

Recommended:

Posted in jquery. Tags: . Permalink. Both comments and trackbacks are closed.

5 Comments

  1. October 17, 2011 at 4:10 pm | Permalink

    Re: the Amir code, if you’re displaying the jQuery UI dialog’s title bar, you could just close the dialog by triggering a click on the visible X:

    $(‘.ui-widget-overlay’).live(‘click’, function() {
    $(“.ui-dialog-titlebar-close:visible”).click()
    });

    :D

  2. Googoo
    October 30, 2010 at 10:10 am | Permalink

    K – after looking into the code of the datepicker here's my final version using the click target option.

    // bind mousedown on entire document
    $(document).mousedown(function(e) {
    var clicked=$(e.target); // get the element clicked
    if(clicked.is('#modalDialog') || clicked.parents().is('#modalDialog')) {
    // clicked happend within the dialog
    } else {
    // outside click
    $('#modalDialog').dialog("close"); // let's close it
    }
    });

  3. Googoo
    October 7, 2010 at 10:12 am | Permalink

    Ver nice – thanks for this.

    I am using tabs within the dialog and by clicking a tab I hab to click twice outside of the dialog in order to close it again (at least in FF 3.6).

    The below fixed this:

    $("#tabs").tabs({
    select: function(){closedialog = 1;}
    });

    Why? Beats me … thought I share

  4. September 13, 2010 at 12:59 pm | Permalink

    Wow, you're awesome. Thanks for this great bit of code, you'll be getting a back link shortly.

    Thanks!!!

  5. June 19, 2010 at 7:12 am | Permalink

    very nice mate, thanks for this, I was trying to close the modal but no luck, this helped…

One Trackback

  1. [...] This post was mentioned on Twitter by Jason Dean(12Robots), jen. jen said: New Post: jQuery Modal Dialog Close on Overlay Click on jensbits.com: http://bit.ly/dg0dYz [...]