prevent bootstrap modal from closing when clicking outside or escape

This article explains how to prevent bootstrap modal from closing/disappearing when clicking outside or escape.

This can be done in two ways

  1. Through JavaScript or
  2. Through HTML

JavaScript:

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

HTML:

<div id="modalID" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

According to bootstrap documentation

backdrop (Type: boolean|string, Default: true) - Controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static'(disables modal closing by click on the backdrop).
keyboard - (Type: boolean, Default: true) - Indicates whether the dialog should be closable by hitting the ESC key.

By passing backdrop option with value 'static' will prevent closing the modal. Also by passing {keyboard: false} we can prevent closing the modal by pressing Esc.

In this way we can prevent the bootstrap modal from closing when clicking outside or escape.

For more posts on bootstrap visit: BootStrap

1 comment:




  1. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.


    SAP training in Chennai

    ReplyDelete