¿Cómo se habilita la funcionalidad de cierre de la tecla de escape en un modal de Bootstrap de Twitter?

132

Seguí las instrucciones para el modal Bootstrap de Twitter en su página principal de documentación
y utilicé la data-keyboard="true"sintaxis mencionada, pero la tecla de escape no cierra la ventana modal.
¿Hay algo más que me estoy perdiendo?

Código:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>
twitter-bootstrap perseverancia
fuente
2
Esto está habilitado por defecto
Adam F

Respuestas:

301

Parece que este es un problema con la forma en que se vincula el evento keyup.

Puede agregar el tabindexatributo modal para evitar este problema:

tabindex="-1"

Entonces su código completo debería verse así:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

Para obtener más información, puede ver la discusión sobre este tema en github

(Enlace actualizado al nuevo repositorio TWBS)

Craig MacGregor
fuente
3
Sin embargo, esto evita el enfoque automático desde los campos de entrada.
topless
3
También puede agregar el atributo de teclado de datos a su div.modal (y omitirlo en las personas que llaman) si invoca el diálogo desde varios lugares.
Vitalik Verhovodov
2
Como @nrek señala a continuación: cerrar con escape es cierto de forma predeterminada, por lo que no es estrictamente necesario data-keyboard="true": es lo tabindex="-1"que permite el comportamiento
Leo
Puedo confirmar que esta solución funciona en Bootstrap 4. No sé por qué no funciona de manera predeterminada como dicen los documentos.
Binar Web
Además, data-keyboardpertenece al elemento modal, no al controlador. Esto se puede probar configurándolo en false.
WoodrowShigeru
23

Además, si está invocando a través de JavaScript, use esto:

$('#myModal').modal({keyboard: true})
dennisbot
fuente
15
esto solía ser lo único que tenía que hacer, pero ahora también debe asegurarse de que su div tenga un atributo 'tabindex = "- 1"'.
Bala Clark
1
Solo tuve que configurar el índice de la pestaña.
weltschmerz
@dchacke, ¡eso es porque la propiedad del teclado está predeterminada en verdadero! así que simplemente configure tabindex = '- 1'
nrek
12

agregar tabindex="-1"atributo a div modal

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>
Trupti
fuente
3

En angular estoy usando así:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • backdrop: 'static' => Detener para cerrar al hacer clic afuera
  • teclado: falso => ​​Pare para cerrar usando el botón de escape
Ali Adravi
fuente
-1

Bootstrap 3

En HTML, solo configúrelo data-backdropcomo static y data-keyboardfalse

Ejemplo:

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

o 

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

Prueba en vivo:

https://jsfiddle.net/sztx8qtz/

Saber más: http://budiirawan.com/prevent-bootstrap-modal-closing/

Rashedul Islam Sagor
fuente
Su ejemplo no habilita la tecla de escape
Binar Web