Jquery UI - Close Dialog When Clicked Outside

jQuery UI - Close Dialog When Clicked Outside

Check out the jQuery Outside Events plugin

Lets you do:

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});

jQuery UI Dialog: Close when Click Outside

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

jQuery UI dialogs: how to close dialog when click outside?

Here are 2 other solutions for non-modal dialogs:

If dialog is non-modal Method 1:
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')
                         && !jQuery(e.target).is('.ui-dialog, a')
                         && !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;
          }

  });

How to close a jQuery UI modal dialog by clicking outside the area covered by the box?

To clarify, the answer by Victor only works 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. If you open the dialog with an event like click at any point whether autoOpen is set to true or false, then you have to use jQuery.live.

Fiddle demonstrating failure of overlay click event with autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle demonstrating how live works with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/1/

Summary: Victor's answer only works under certain conditions.

Tutorial link

How to close jquery-ui dialog on click outside?

Clicking the button element first triggers a click event for that element, and then the click event gets propagated upwards to higher levels in the DOM. event.stopPropagation() prevents the event from getting propagated to higher levels:

$("#opendialog").click(function(event){
  event.stopPropagation();
  $(".dialog").dialog("open");
});

What if the user clicks the open button when the dialog is already open? Should this still count as clicking outside the dialog, and close it? If that is the desired behaviour, the following works:

$("#opendialog").click(function(event){
  if (!$(".dialog").dialog("isOpen")) {
    event.stopPropagation();
    $(".dialog").dialog("open");
  }
});

---

Related Topics