Prevent Bootstrap Modal From Closing

The default configuration of Bootstrap modal is can be closed when visitor click outside the modal or by pressing the escape (ESC) key. If you want to prevent boostrap modal from closing by those actions, you need to change the value of backdrop and keyboard configuration. The default value of backdrop and keyboard is set to true.

You can change the configuration in HTML or Javascript directly.

In HTML, just set data-backdrop to static and data-keyboard to false

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

or using Javascript

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

I use Bootstrap v3.2.0 when this article is written. More information about Bootstrap modal.

Good luck :)

  • Ifeora Okechukwu

    Nice article on Bootstrap CSS … but this doesn’t work as i have tested on JSfiddle