How to prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

html

modal

user-experience

javascript

byAnton Shumikhin·Aug 3, 2024

Shield your Bootstrap modal using the two mighty parameters: backdrop: 'static' prevents the modal from closing when the background is clicked, and keyboard: false rejects the escape key press.

Here's the key code of this act:

$('#myModal').modal({
  backdrop: 'static', // backdrop security: 'You shall not pass!'
  keyboard: false     // keyboard security: 'Escape, you sneaky, not today!'
});

With these, your modal turns into a persistent presence, to be dismissed only according to your royal decree.

For the same control expressed via HTML data attributes in the markup, try this:

<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
  ...
</div>

How to master the modal's behavior

Ditching the defaults

Revamping the convention, the aim is to provide an immersive dialogue with focus on content over exit paths. By ~~banning~~ eliminating default close triggers, we prevent accidental dismissals and reinforce the true essence of a modal: to keep the user's attention until they're done.

The button-ending action

Completing interaction in a modal should be the sole exit path. This could be a button saying 'Done', 'Finish' or in developer's parlance, 'Task Complete, Abort Mission Now!' It keeps the shutdown intentional.

When the dynamic kicks in

In a perfect world, modals obey their initial config. But sometimes, conditions strike back and dynamic measures are needed. The show.bs.modal event is your lightsaber, letting you modify modal behavior even after its inception.

Here's an example of how to counterattack those pesky dynamics:

$('#myModal').on('show.bs.modal', function (e) {
  $(this).data('backdrop', 'static'); // adapt to survive, right here, right now
  $(this).data('keyboard', false); // no one escapes on my watch!
});

This event-driven solution ensures that your modal always behaves the way you chose, notwithstanding how or when it got triggered.

Getting the data attribute advantage

Favoring the data-* attributes yields a pleasant double-benefit: Your configuration becomes clear as crystal right within the HTML markup, and JavaScript code gets a breather.

Roadmap to sturdier modals

Bypassing irksome triggers

Clicking on the overlay or pressing navigation keys are common defaults but can be more of a pain than a gain. Swiftly dispose of these hidden traps with a rigorous lockdown, making distractions a thing of the past.

Power-packed anchors

When anchor elements are your preferred method for running the modal show, directly apply the essential data attributes to maintain a consistent behavior across a variety of activation points.

<a href="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">Open Modal</a>

This ensures no unexpected gute nacht, whether you open the modal from a button, a link or anything else.

User feedback: The magic mirror

Sometimes, the users of your modal can be your best advisors. Establish channels for feedback and adapt according to the common trends they reveal. It's an iterative process but the rewards for the UX are well worth the effort.

explain-codes / Html / How to prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Linked

Avoid dropdown menu close on click inside



Hide Twitter Bootstrap nav collapse on click



How to close current tab in a browser window?



How do I remove background-image in css?



Jquery: Get height of hidden element in jQuery

