How to disable click outside modal to close modal in bootstrap ?

Last Updated : 10 Mar, 2023

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/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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 1: Output of Disable click outside of bootstrap modal area to close modal

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/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
         rel="stylesheet" integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous" /> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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>