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

Read more...

Bootstrap modal close event

Boot strap refers two hide events that we can use 

Bootstrap 3 modal close event 

From bootstrap documentation

hide.bs.modal :  This event is fired immediately when the hide instance method has been called.

hidden.bs.modal : This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Example:

You can use the following syntax to catch the bootstrap modal hide event 

$('#myModal').on('hidden.bs.modal', function () {

    // do somtething here

});

bootstrap 2 modal close event

hide: This event is fired immediately when the hide instance method has been called.

hidden: This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

Example:

You can use the following syntax to catch the bootstrap modal hide event

$('#myModal').on('hidden', function () {

     // do something…

});

Using above jquery code you can catch the bootstrap modal close event.

Read more...