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>
twitter-bootstrap perseverança
fonte
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)

Craig MacGregor
fonte
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})
dennisbot
fonte
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>
Trupti
fonte
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
Ali Adravi
fonte
-1

Bootstrap 3

Em HTML, apenas defina data-backdropcomo estático e data-keyboardfalso

Exemplo:

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

ou 

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

Teste ao vivo:

https://jsfiddle.net/sztx8qtz/

Saiba mais: http://budiirawan.com/prevent-bootstrap-modal-closing/

Rashedul Islam Sagor
fonte
Seu exemplo não permitir chave de escape
Binar Web