Bloquear el cierre de una ventana modal en BootStrap 3

Por defecto, las ventanas modales de Bootstrap 3 se cierran de tres formas:

• Al pulsar la tecla escape
• Al hacer clic en el botón de cierre (una equis en la esquina superior derecha)
• Al hacer clic fuera de la ventana modal (la zona sombreada en negro)

Esto es deseable en interfaces de teclado y ratón, pero al pasar a una interfaz táctil he visto lo fácil que es tocar la zona sombreada con la palma de la mano sin querer, provocando que la ventana modal se cierre. Este comportamiento lo podemos desactivar de forma sencilla de dos formas:

1. Vía HTML: incluyendo el parámetro data-backdrop="static" en el div de la ventana modal
2. Vía JavaScript: pasando un JSON con la opción backdrop : 'static'

 Ejemplos:

Usando data-backdrop

<div class="modal fade" data-backdrop="static" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Título</h4>
      </div>
      <div class="modal-body">
        <p>Una ventana modal</p>
      </div>
    </div>
  </div>
</div>
       

Usando backdrop como opción

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

Referencias: Documentación de Modal en getbootstrap.com