jQuery - How to close a jQueryUI dialog box with a click outside the box
Table of Contents
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>