How to close the non-modal dialog box by clicking outside in function using jquery ui

Question

here i define a function for calling various dialog boxes, but i am not able to close it by clicking outside .please help me.

Thanks

javascript

/*function for dialog box */

function dialogBox(dialoge,opener){
if(dialoge.length>0 && opener.length>0){
  dialoge.dialog({ 
    autoOpen: false,
    width: 300,  //width
    height: "auto",

    buttons: {
      Close: function() {
        dialoge.dialog( "close" );
      }
  }
  });
 $("body").on("click",".ui-widget-overlay",function() {
 dialoge.dialog( "close" );   /*this works for modal */
 });
  opener.click(function() {
    dialoge.dialog("open");
    return false;
  });    
 }
 }

function calling

 var desc_add = $(".dialog");
 var desc_open = $(".opener");
 if(desc_add && desc_open){
desc_open.change(function(){
  dialogBox(desc_add, desc_open);
  });
 dialogBox(desc_add, desc_open);
 }

ruby

<%= image_tag("/assets/help.png", :alt => "info", class: "opener") %>
<div id="dialog" title="HELP">for the addess</div>

Answer 1

There are many examples here that might suit your case:

How do I detect a click outside an element?

don't forget to fix your javascript, it has an extra })