0

I would like to close the query ui modalbox when the user clicks on the rest of the page that is in the background.

I added this snippet to do this but it isn't working:

$('.ui-widget-overlay').on("click", function() {
    //Close the dialog
    $(this).find(".dialog").dialog("close");
});

Example

birdy
  • 9,286
  • 24
  • 107
  • 171
  • please add page code, why are you using the (this) in the query? – Dory Zidon May 21 '13 at 18:23
  • 1
    @DoryZidon Just curious but what's wrong with using (this) in the query? I've used it before. However, if this causes negative performance that I'm unaware of I may be regrouping when and how often I use (this) in my own code... – War10ck May 21 '13 at 18:33
  • this is js has many meaning..could be tricky, but i assume jQuery gives you the element on which you click but I'd test it before..like alert this.tagName to see what comes up.. – Dory Zidon May 21 '13 at 18:34
  • `.find(".dialog")` I can't find an element with class `dialog` in your jsfiddle markup. – Jasen May 21 '13 at 18:36

1 Answers1

1
$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
});

DEMO

This works... Found here

Community
  • 1
  • 1
brbcoding
  • 13,378
  • 2
  • 37
  • 51