In this article, I will show you how to close the jQuery ui dialog on click elsewhere on the page. You can specify animated effect for the dialog to hide/ show properties.
Normally dialog has close button, if you want to close the dialog popup by clicking the close button. Below example makes an easy click anywhere on the page dialog will close.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#opener").click(function () {
$("#dialog2").dialog('open');
});
$("#dialog2").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
hide: { effect: 'drop', duration: 250 },
show: { effect: 'fade', duration: 500 },
resizable: false, draggable: false,
width: 'auto', dialogClass: 'fixed-dialog',
open: function (event, ui) {
$('.ui-widget-overlay').bind('click', function () {
$("#dialog2").dialog('close');
});
}
});
});
</script>
<button id="opener">open the dialog</button>
<div id="dialog2" align="center" hidden="hidden">
<div class="body">
Jquery UI dialogs automatically closewhen you click elsewhere on the page.
</div>
</div>
jQuery ui dialog example:
Post your comments / questions
Recent Article
- How to add two numbers in Android Studio? | Source Code
- FindViewByID returns null in android studio -SOLVED
- Saving changes is not permitted in SQL SERVER - [SOLVED]
- Restore of database failed. File cannot be restored over the existing. -[SOLVED]
- One or more projects in the solution were not loaded correctly in Visual Studio 2019 | FIXED
- How to find Laptop's Battery Health?
- SOLVED-Related Field got invalid lookup: icontains error in Django
- How to enable Search Feature in Django admin?
Related Article