7

¿Cómo evito que al tener una modal de Boostrap abierta y se le de en la parte gris que pone de fondo no se salga de la ventana modal?

2 respuestas 2

14

Para bootstrap 3:

Desde html:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

Desde jQuery:

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

Otros atributos data:

|----------------------------------------------------------------------|
|  backdrop   |  Incluye un elemento modal-backdrop. Como alternativa, |
|             |  especifique `static` para un fondo que no cierre el   |
|             |  modal en clic.                                        |
|-------------|--------------------------------------------------------|
|  keyboard   |  Con valor `booleano: true` evita cerra el modal cuando|
|             |  se presiona la tecla `escape`                         |
|-------------|--------------------------------------------------------|
|    show     |  Muestra el modal cuando se inicializa                 |
|-------------|--------------------------------------------------------|
|   remote    |   deprecado desde v3.3.0. Carga desde una vía remota   |
|             |  el contenido del modal                                |
|-------------|--------------------------------------------------------|

Referencia completa

0
9

Como se muestra en la documentación de Bootstrap, se pueden pasar opciones al momento de crear un diálogo modal.

$('#myModal').modal({backdrop: 'static', keyboard: false})
  • backdrop: booleano para establecer si se presenta un elemento de fondo. Alternativamente, se puede usar static para que aparezca pero no se cierre al hacer click.

  • keyboard: booleano para establecer si se cierra el modal al presionar Esc.

2
  • 1
    Excelente aportación Mariano, gracias Commented el 15 dic. 2016 a las 23:19
  • 1
    De esta forma abre la modal al iniciar al dom Commented el 16 dic. 2016 a las 0:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.