How to disable click outside modal to close modal in bootstrap ?
Last Updated :
31 Jul, 2024
Bootstrap is a very powerful, extensible, and feature-packed fronted toolkit which is used to build fast and responsive websites.
Bootstrap 5 provides us with its powerful Modal component which can be used to create models within the website at an ease. In this article, we are going to see how we can disable the click outside of the bootstrap modal area to close the modal functionality.
Bootstrap 5 provides us with the static backdrop option to set the backdrop static and hence, it does not close the modal even if the user clicks outside the modal area.
Syntax: To set the backdrop to static, in the modal element set the "data-bs-backdrop" attribute to "static".
<div class='modal' data-bs-backdrop='static' ...>
...
</div>
Approach: Simply, when you are using the modal and want to disable the "click outside modal area to close it" functionality, you just need to set the backdrop value (data-bs-backdrop attribute) of the modal element to "static" and you can disable that functionality.
Example 1: In this example, we have a simple "About us" modal and we have set its "data-bs-backdrop" attribute to "static" and have obtained the desired output.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<title>
Disable click outside of bootstrap
modal area to close modal
</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>
Disable click outside of bootstrap
modal area to close modal
</h4>
<!-- Button trigger modal -->
<button type="button"
class="btn btn-success"
data-bs-toggle="modal"
data-bs-target="#aboutUs">
Click to know more about us
</button>
<!-- Modal -->
<div class="modal fade" id="aboutUs"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="aboutUsLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5"
id="aboutUsLabel">
GFG | About Us
</h1>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
GeeksforGeeks is a computer science
portal for geeks and a home to
millions of programmers. <br>
<h5 class="mt-3">What we offer</h5>
Free Tutorials, Millions of Articles,
Live, Online and Classroom Courses,
Frequent Coding Competitions, Webinars
by Industry Experts, Internship
opportunities and Job Opportunities.
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we have a multi-step feedback form embedded in our modal and we have set its backdrop to static and the output is obtained.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<title>
Disable click outside of bootstrap
modal area to close modal
</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous" />
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>
Disable click outside of bootstrap
modal area to close modal
</h4>
<!-- Button trigger modal -->
<button type="button"
class="btn btn-outline-success"
data-bs-toggle="modal"
data-bs-target="#feedback">
Give Feedback
</button>
<div class="modal fade" id="feedback"
data-bs-backdrop="static"
aria-hidden="true"
aria-labelledby="feedbackLabel"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5"
id="feedbackLabel">
Feedback (1/2)</h1>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="name"
class="col-form-label">
Name:
</label>
<input type="text"
class="form-control"
id="text">
</div>
<div class="mb-3">
<label for="email"
class="col-form-label">
Email:
</label>
<input type="email"
class="form-control"
id="email">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success"
data-bs-target="#feedback2"
data-bs-toggle="modal">
Next
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="feedback2"
data-bs-backdrop="static"
aria-hidden="true"
aria-labelledby="feedbackLabel2"
tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fs-5"
id="feedbackLabel2">
Feedback (2/2)
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="feedback-box"
class="col-form-label">
Feedback:
</label>
<textarea class="form-control"
id="feedback-box">
</textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-success"
data-bs-target="#feedback"
data-bs-toggle="modal">
Previous
</button>
<button class="btn btn-success"
data-bs-dismiss="modal">
Success
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/components/modal/
Similar Reads
How to change the position of modal close button in bootstrap?
The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values. Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will crea
4 min read
How to handle the modal closing event in Twitter Bootstrap?
Modal Closing Event in Twitter Bootstrap | Set 1 Prerequisite Knowledge: Bootstrap 4 | Modal Twitter Bootstrap’s modal class offer a few events that are fired at the standard Bootstrap modal class. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that is customizable and responsi
3 min read
How to disable Responsive (mobile) Navbar in Bootstrap 5?
Bootstrap 5 Navbar Nav is used to make the navbar according to the requirement of the project like navbar navigation links built on .nav options with their own modifier class. Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button but in this article, we
3 min read
How to use modal closing event in Twitter Bootstrap ?
Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that's customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap Modals are divided into three primary sections: header, body, and footer. Syntax: class | tabindex | role | ar
2 min read
How to configure modal width in Bootstrap?
Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website's content rendering as per the requirements. In this article, we will focus on adjusting the width/height of the modal box.Method 1: Using pr
2 min read
How to disable tabs in Bootstrap ?
To disable a tab, we can remove the attribute : data-toggle="tab" from the tab part enclosed under 'a' element. Further we can add the class .disabled to the parent list item element to make it look visually disabled. (like class="disabled" inside list item)To show a case of disabling tabs, first, w
3 min read
How to make whole row in a table clickable as link in Bootstrap ?
Making a table row clickable as a link means that clicking anywhere in that row takes you to a specified webpage, making navigation easier and more interactive for users. To make a whole row clickable as a link in Bootstrap, wrap each <tr> in an <a> tag or use the Bootstrap styling. Usin
2 min read
How to Dismiss a React-Bootstrap Popover on Click Outside ?
This article implements popover functionality using the React Bootstrap library. It consists of a button labeled "Show Popover," and when this button is clicked, a popover with the title "Popover Right" and the content "Some Amazing Content" is displayed to the right of the button. The popover is sh
3 min read
How to fit the image into modal popup using Bootstrap?
Modal plugin allows us to add a dialog popup window that is displayed on top of the current page. Bootstrap provides an easy, yet effective way to incorporate modal into our web pages. Modal can consist of any content along with a header and footer. Images can be fitted in modal popup using Bootstra
2 min read
How to Align Modal to Center of the Screen in Bootstrap?
Aligning a modal to the center of the screen in Bootstrap means positioning the modal window vertically and horizontally at the center of the viewport. This can be achieved using Bootstrap's classes like modal-dialog-centered, which ensures the modal appears in the middle, providing a balanced and u
1 min read