How to close jquery-ui dialog on click outside?

Question

I am working with jquery-ui dialog (Non modal dialog). I want to close the dialog if user click outside the dialog. For this reason i used Jquery Outside Events Plugin . I created a fiddle also :

http://jsbin.com/apezok/3/edit

In this fiddle i created a button by which we can open a dialog. I bind the clickoutside event also with the dialog. Now my problem is when i click over the button to open the dialog the click outside event execute and close the dialog.How can i stop this event to executing while opening of the dialog ?

Answer 1

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