Como você habilita a funcionalidade de fechamento da chave de escape em um modal do Twitter Bootstrap?


132

Segui as instruções para o modal de inicialização do Twitter na página principal de documentação
e usei a data-keyboard="true"sintaxe mencionada, mas a chave de escape não fecha a janela modal.
Há algo mais que estou perdendo?

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
Isso está ativado por padrão
Adam F

Respostas:


301

Parece que este é um problema de como o evento keyup está sendo vinculado.

Você pode adicionar o tabindexatributo ao seu modal para contornar esse problema:

tabindex="-1"

Portanto, seu código completo deve ficar assim:

<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 mais informações, você pode ver a discussão sobre esse assunto no github

(Link atualizado para o novo repositório TWBS)


3
Isso evita o foco automático dos campos de entrada.
topless

3
Você também pode anexar o atributo data-keyboard ao seu div.modal (e omiti-lo nos chamadores) se chamar a caixa de diálogo de vários locais.
Vitalik Verhovodov 26/09

2
Como pontos @nrek fora abaixo - perto com a fuga é verdade, por padrão, para que você não estritamente precisa data-keyboard="true"- é tabindex="-1"que permite que o comportamento
Leo

Posso confirmar que esta solução funciona no Bootstrap 4. Não sei por que não funciona por padrão, como dizem os documentos.
Página

Além disso, data-keyboardpertence ao elemento modal, não ao controlador. Isso pode ser testado configurando-o como false.
WoodrowShigeru 25/06

23

Além disso, se você estiver chamando via javascript, use o seguinte:

$('#myModal').modal({keyboard: true}) 

15
isso costumava ser a única coisa que você precisava fazer, mas agora você também precisa garantir que sua div tenha um atributo 'tabindex = "- 1"'.
Bala Clark

1
Eu só tinha que definir o índice da guia.
weltschmerz

@dchacke é porque a propriedade do teclado é padrão para true! Então, basta definir tabindex = '- 1'
nrek 15/11/2015

12

adicionar tabindex="-1"atributo à div modal

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

</div>

3

Em angular eu estou usando assim:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • backdrop: 'static' => Pare para fechar ao clicar fora
  • keyboard: false => Pare para fechar usando o botão de escape

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.