Comment activer la fonctionnalité de fermeture de la touche d'échappement dans un modal Twitter Bootstrap?

132

J'ai suivi les instructions du modal Twitter Bootstrap sur leur page de documentation principale
et j'ai utilisé la data-keyboard="true"syntaxe mentionnée mais la touche d'échappement ne ferme pas la fenêtre modale.
Y a-t-il autre chose qui me manque?

Code:

<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 persévérance
la source
2
Ceci est activé par défaut
Adam F

Réponses:

301

Il semble que ce soit un problème avec la façon dont l'événement keyup est lié.

Vous pouvez ajouter l' tabindexattribut à votre modal pour contourner ce problème:

tabindex="-1"

Donc, votre code complet devrait ressembler à ceci:

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

Pour plus d'informations, vous pouvez consulter la discussion sur ce problème sur github

(Lien mis à jour vers le nouveau référentiel TWBS)

Craig MacGregor
la source
3
Cela empêche la mise au point automatique des champs de saisie.
topless le
3
Vous pouvez également ajouter l'attribut data-keyboard à votre div.modal (et l'omettre dans les appelants) si vous appelez la boîte de dialogue à partir de plusieurs endroits.
Vitalik Verhovodov du
2
Comme @nrek le souligne ci-dessous - fermer avec échappement est vrai par défaut, donc vous n'en avez pas strictement besoin data-keyboard="true"- c'est cela tabindex="-1"qui active le comportement
Leo
Je peux confirmer que cette solution fonctionne dans Bootstrap 4. Je ne sais pas pourquoi cela ne fonctionne pas par défaut comme le disent les documents.
Binar Web
De plus, data-keyboardappartient à l'élément modal, pas au contrôleur. Cela peut être testé en le définissant sur false.
WoodrowShigeru
23

également si vous appelez via javascript, utilisez ceci:

$('#myModal').modal({keyboard: true})
Dennisbot
la source
15
c'était la seule chose que vous deviez faire auparavant, mais maintenant vous devez également vous assurer que votre div possède un attribut 'tabindex = "- 1"'.
Bala Clark
1
Je n'avais qu'à définir l'index des onglets.
weltschmerz
@dchacke c'est parce que la propriété du clavier est true par défaut! alors il suffit de définir tabindex = '- 1'
nrek
12

ajouter un tabindex="-1"attribut à la div modale

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

</div>
Trupti
la source
3

En angulaire, j'utilise comme ceci:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • backdrop: 'static' => Arrêtez pour fermer en cliquant à l'extérieur
  • keyboard: false => Arrêtez pour fermer en utilisant le bouton d'échappement
Ali Adravi
la source
-1

Bootstrap 3

En HTML, il suffit de définir data-backdropstatique et data-keyboardfaux

Exemple :

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

Test en direct:

https://jsfiddle.net/sztx8qtz/

En savoir plus: http://budiirawan.com/prevent-bootstrap-modal-closing/

Rashedul Islam Sagor
la source
Votre exemple n'active pas la touche d'échappement
Binar Web