How to Prevent Bootstrap Modal from Disappearing when Clicking Outside or Pressing Escape Button ?
Last Updated :
26 Apr, 2023
Bootstrap Modal is designed to disappear when the user clicks outside the modal or presses the Escape Key. However, we can prevent this action off of the modal to disappear when clicked outside or by pressing the Escape Key by simply adding the backdrop and keyboard options to the modal configuration. In order to prevent this modal from disappearing when clicking outside of it, set the backdrop option to “static” as this will prevent the modal from shutting down when the closer clocks outside the modal and to prevent the Escape press we can set the keyboard option to false. When the user presses the keyboard button then it will not have any effect on the modal.
Approach 1: Using the “backdrop option”: Bootstrap Modal plugin provides an option called “backdrop” which controls whether clicking outside the modal should close the modal or not. By default, the backdrop option is set to “true”, which means that clicking outside the modal will close it. To prevent the modal from closing, we can set the backdrop option to “static”.
Syntax:
('#myModal').modal({
backdrop: 'static',
keyboard: false
})
Example: This example is implemented by using the backdrop option.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Prevent Bootstrap Modal from Disappearing
</title>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success text-center mt-.5rem">
GeeksforGeeks
</h1>
<div class="text-center">
<button type="button"
class="btn btn-primary ml-3"
data-toggle="modal"
data-target="#myBox">
Click here to Launch modal
</button>
</div>
<div class="modal fade" id="myBox"
tabindex="-1" role="dialog"
aria-labelledby="myBoxLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myBoxLabel">
Modal title
</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
This is Modal body.
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<script>
$("#myBox").modal({
backdrop: "static",
keyboard: false,
});
</script>
</body>
</html>
|
Output:
Approach 2: Using jQuery event handler: Another method is to use the jQuery event handler to prevent the modal from disappearing. You can add an “on click” event handler to the modal’s backdrop and prevent the default behavior, of closing the modal.
Syntax:
$('#myModal').on('click', '.modal-backdrop', function(e){
e.preventDefault();
});
$(document).on('keydown', function(e){
if (e.key === "Escape") {
e.preventDefault();
}
});
Example: This example is implemented using jQuery.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<div id="myBox" class="modal fade"
tabindex="-1" role="dialog"
aria-labelledby="myBoxLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"
id="myBoxLabel">
Modal Title
</h4>
<button type="button"
class="close"
data-dismiss="modal"
aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<p>This is Modal Body</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#myBox">
Click here to Launch Modal
</button>
</div>
<script>
$(document).ready(function () {
$('#myBox').on('show.bs.modal',
function (event) {
$(this).data('bs.modal').
_config.backdrop = 'static';
$(this).data('bs.modal').
_config.keyboard = false;
});
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...