Close dialog on click anywhere

Question

Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon

User · Answer

If you have several dialogs that could be opened on a page, this will allow any of them to be closed by clicking on the background:

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

(Only works for modal dialogs, as it relies on '.ui-widget-overlay'. And it does close all open dialogs any time the background of one of them is clicked.)

User · Answer

This post may help   http   www jensbits com 2010 06 16 jquery-modal-dialog-close-on-overlay-click   See also How to close a jQuery UI modal dialog by clicking outside the area covered by the box  for explanation of when and how to apply overlay click or live event depending on how you are using dialog on page

User · Answer

Facing the same problem  I have created a small plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog  It supports one or multiple dialogs on the same page   More information on my website here  http   www coheractio com blog closing-jquery-ui-dialog-widget-when-clicking-outside  Laurent

User · Answer

A bit late but this is a solution that worked for me  Perfect if your modal is inside the overlay tag  So  the modal will close when you click anywhere outside the modal content   HTML   lt div class  modal  gt       lt div class  overlay  gt       lt div class  modal-content  gt         lt p gt HELLO WORLD  lt  p gt       lt  div gt     lt  div gt   lt  div gt    JS    document  on  click   function event      if    event target  has   modal-content   length            modal   hide              Here is a working example

User · Answer

Try this       ui-widget-overlay   click function              ui-icon ui-icon-closethick   trigger  click

User · Answer

In some cases  Jason s answer is overkill  And     ui-widget-overlay   click function        dialog   dialog  close        doesn t always work with dynamic content   The solution that I find works in all cases is      body   on  click    ui-widget-overlay  function        dialog   dialog  close

User · Answer

If you d like to do it for all dialogs throughout the site try the following code       extend    ui dialog prototype options         open  function             var dialog   this              ui-widget-overlay   bind  click   function                   dialog  dialog  close

User · Answer

Edit  Here s a plugin I authored that extends the jQuery UI Dialog to include   closing when clicking outside plus other features    https   github com jasonday jQuery-UI-Dialog-extended   Here are 3 methods to close a jquery UI dialog when clicking outside popin   If the dialog is modal has background overlay  http   jsfiddle net jasonday 6FGqN   jQuery document  ready function         jQuery   dialog   dialog           bgiframe  true          autoOpen  false          height  100          modal  true          open  function                 jQuery   ui-widget-overlay   bind  click   function                     jQuery   dialog   dialog  close                                            If dialog is non-modal Method 1  http   jsfiddle net jasonday xpkFf      Close Pop-in If the user clicks anywhere else on the page jQuery  body        bind  click   function e            if jQuery   dialog   dialog  isOpen                amp  amp   jQuery e target  is   ui-dialog  a                amp  amp   jQuery e target  closest   ui-dialog   length                         jQuery   dialog   dialog  close                        Non-Modal dialog Method 2  http   jsfiddle net jasonday eccKr     function             dialog   dialog           autoOpen  false           minHeight  100          width  342          draggable  true          resizable  false          modal  false          closeText   Close           open  function                 closedialog   1                document  bind  click   overlayclickclose              focus  function                  closedialog   0             close  function                    document  unbind  click                       linkID   click function                 dialog   dialog  open            closedialog   0               var closedialog       function overlayclickclose             if  closedialog                    dialog   dialog  close                        set to one because click on dialog box sets to zero         closedialog   1

User · Answer

If the code of the previous posts doesn t work  give this a try      a ui-dialog-titlebar-close   0  click

User · Answer

When creating a JQuery Dialog window  JQuery inserts a ui-widget-overlay class   If you bind a click function to that class to close the dialog  it should provide the functionality you are looking for   Code will be something like this  untested        ui-widget-overlay   click function         dialog   dialog  close          Edit  The following has been tested for Kendo as well       k-overlay   click function                  var popup       dialogId   data  kendoWindow                if  popup                  popup close

[jquery] Close dialog on click (anywhere)

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

[jquery] Close dialog on click (anywhere)

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

Examples related to modal-dialog