How to Prevent Bootstrap Modal from Disappearing when Clicking Outside or Pressing Escape Button ?

How to change the position of modal close button in bootstrap?

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

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: 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.

HTML

<!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">
                            &times;
                        </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

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.