jQuery - How to close a jQueryUI dialog box with a click outside the box

About

A page about the Jquery Dialog Wiget from the Jquery Ui library.

Articles Related

Snippet

let selector = '#dialog';
$( function() {
    $( selector ).dialog();
  } );
  

• A click on the document, close it

$(document).click(function () {
	$(selector).dialog('close')
});

• Except in the element itself

$(selector).click(function (e) {
	e.stopPropagation();
});

<h2>Demo on how to close a Jquery dialog box with a oustide click</h2>
<ul>
    <li>A Click outside the box should close the dialog</li>
    <li>A Click in the box should not close the dialog</li>
</ul>

<div id="dialog" title="Basic dialog">
  <ul>
    <li>A Click outside the box should close the dialog</li>
    <li>A Click in the box should not close the dialog</li>
</ul>
</div>