Two Ways to Stop Bootstrap Modals from Closing (Including Code Examples)

• Bootstrap modals are pop-up windows built with HTML, CSS, and JavaScript.
• They typically have a close button and a backdrop that dims the rest of the page.
• Clicking the backdrop or the close button normally closes the modal.

Preventing Modal Closure:

There are two main approaches using jQuery:

1. Modifying Backdrop Behavior (backdrop: 'static'):

   • By default, the modal backdrop has the 'static' value disabled.
   • Setting backdrop: 'static' prevents the modal from closing by clicking the backdrop.
   • However, the close button will still function normally.

   Here's how to implement it:

   $('#myModal').modal({backdrop: 'static'});
   

2. Using Event Handlers (stopPropagation):

   • You can utilize jQuery's event handling to intercept the closing event.
   • Attach an event listener to the modal element (e.g., the .modal-dialog).
   • When the close button is clicked or the backdrop is clicked, the event handler triggers.
   • Within the handler, use event.stopPropagation() to prevent the default close behavior.

   Here's an example:

   $('#myModal').on('click', function (event) {
       if (event.target === this || $(event.target).hasClass('modal-dialog')) {
           event.stopPropagation();
           // Optionally, add your custom logic here (e.g., display a confirmation message)
       }
   });
   

Important Considerations:

• Prevent default closing behavior carefully. A modal without a clear way to close can be frustrating for users.
• Consider providing an alternative closing mechanism (e.g., a confirmation button) if using backdrop: 'static'.
• These methods work slightly differently depending on the Bootstrap version you're using. Refer to the Bootstrap documentation for the specific version you're working with for any variations.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Disallow Close</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This modal can't be closed by clicking the backdrop.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close Me</button>
      </div>
    </div>
  </div>
</div>

$(document).ready(function () {
  $('#myModal').modal({ backdrop: 'static' });
});

Explanation:

• This code includes the HTML structure for a modal with a title, body, and footer.
• The data-bs-toggle and data-bs-target attributes link the button to the modal.
• In the JavaScript, we set the backdrop option to 'static' when initializing the modal with jQuery.
• This prevents the modal from closing by clicking on the dark background area (backdrop).
• However, the close button with data-bs-dismiss="modal" still functions normally.

Example 2: Preventing Close with Event Handler (stopPropagation)

$(document).ready(function () {
  $('#myModal').on('click', function (event) {
    if (event.target === this || $(event.target).hasClass('modal-dialog')) {
      event.stopPropagation();
      // Optionally, add a confirmation message or logic here
      alert("Are you sure you want to close?");
    }
  });
});

• This code uses the same HTML structure as the previous example.
• The JavaScript utilizes jQuery's on('click') event handler attached to the modal element (#myModal).
• When the modal or the .modal-dialog element is clicked (including the close button and backdrop), the event handler triggers.
• Inside the handler, we check if the clicked element is the modal itself or an element within the .modal-dialog.
• Here, we've also added an optional alert to display a confirmation message before closing. You can replace this with your desired logic.

1. Custom Close Button with Confirmation:

Instead of preventing the default close button behavior entirely, you can create a custom close button that triggers a confirmation step.

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" id="customClose">Close</button>
</div>

$(document).ready(function () {
  $('#customClose').click(function (event) {
    if (confirm("Are you sure you want to close?")) {
      $('#myModal').modal('hide');
    }
  });
});

This approach allows users to close the modal but prompts them for confirmation first.

1. Disable Specific Close Actions:

You can selectively disable closing the modal by specific actions, like the keyboard's Esc key. Bootstrap provides the keyboard option for modal initialization.

$('#myModal').modal({ backdrop: 'true', keyboard: false });

Setting keyboard: false prevents closing the modal by pressing the Esc key while it's open.

1. Close Modal Programmatically:

Bootstrap offers methods to control the modal programmatically using JavaScript. You can utilize these methods alongside event listeners to achieve specific closing behavior.

$('#myModal').on('show.bs.modal', function () {
    // Code to run before the modal is shown (optional)
});

$('#myModal').on('shown.bs.modal', function () {
    // Code to run after the modal is fully shown
});

$('#myModal').on('hide.bs.modal', function (event) {
    // Optional: Perform actions before hiding (e.g., confirmation)
    // You can use event.preventDefault() to stop hiding here
});

$('#myModal').on('hidden.bs.modal', function () {
    // Code to run after the modal is hidden
});

These events allow you to intercept the modal's lifecycle and potentially prevent closing based on your conditions.