¿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>

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)


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}) 

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>

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.