Edit in JSFiddle

$( function() {
    $( "#dialog" ).dialog( {
    	modal: true,
    	open: function( event, ui ) {
      	$( ".ui-widget-overlay" ).bind( "click", function() {
          $('#dialog').dialog('close');
        } )
      }
    } );
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>