How to usethe “backdrop option” in Bootstrap
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: In this example we creates a Bootstrap modal that prevents dismissal on clicking outside or pressing the escape key. It also includes a button to launch the modal.
<!DOCTYPE html>
<html>
<head>
<title>
Prevent Bootstrap Modal from Disappearing
</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success text-center mt-.5rem">
w3wiki
</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>
<!-- Modal -->
<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:
Prevent Bootstrap Modal from Disappearing when Clicking Outside Example Output
How to Prevent Bootstrap Modal from Disappearing when Clicking Outside or Pressing Escape Button ?
Preventing Bootstrap Modal from Disappearing when Clicking Outside or Pressing the Escape Button means configuring the modal to remain open even if users click outside the modal or press the escape key. This enhances user experience by ensuring modal content is not accidentally dismissed.
There are some approaches:
Table of Content
- Using the “backdrop option”
- Using jQuery event handler