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
source

2

Ceci est activé par défaut

— Adam F

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

Votre exemple n'active pas la touche d'échappement

— Binar Web

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

Bootstrap 3

Exemple :

Test en direct: