Wie aktivieren Sie die Funktion zum Schließen der Escape-Taste in einem Twitter-Bootstrap-Modal?

132

Ich habe die Anweisungen für das Twitter Bootstrap-Modal auf der Hauptdokumentationsseite befolgt
und die angegebene data-keyboard="true"Syntax verwendet, aber die Escape-Taste schließt das Modalfenster nicht.
Fehlt mir noch etwas?

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 Ausdauer
quelle
2
Dies ist standardmäßig aktiviert
Adam F

Antworten:

301

Es sieht so aus, als ob dies ein Problem damit ist, wie das Keyup-Ereignis gebunden wird.

Sie können das tabindexAttribut modal hinzufügen , um dieses Problem zu umgehen:

tabindex="-1"

Ihr vollständiger Code sollte also folgendermaßen aussehen:

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

Weitere Informationen finden Sie in der Diskussion zu diesem Thema auf github

(Aktualisierter Link zum neuen TWBS-Repository)

Craig MacGregor
quelle
3
Dies verhindert jedoch den Autofokus von Eingabefeldern.
oben ohne
3
Sie können Ihrem div.modal auch ein Datentastaturattribut anhängen (und es bei Anrufern weglassen), wenn Sie den Dialog von mehreren Stellen aus aufrufen.
Vitalik Verhovodov
2
Wie @nrek unten ausführt - Schließen mit Escape ist standardmäßig wahr, Sie brauchen es also nicht unbedingt data-keyboard="true"- es ist das tabindex="-1", was das Verhalten ermöglicht
Leo
Ich kann bestätigen, dass diese Lösung in Bootstrap 4 funktioniert. Ich weiß nicht, warum sie standardmäßig nicht funktioniert, wie in den Dokumenten angegeben.
Binar Web
Darüber hinaus data-keyboardgehört auf das modale Element, nicht die Steuerung. Dies kann getestet werden, indem Sie es auf einstellen false.
WoodrowShigeru
23

Verwenden Sie Folgendes, wenn Sie über Javascript aufrufen:

$('#myModal').modal({keyboard: true})
Dennisbot
quelle
15
Früher war dies das einzige, was Sie tun mussten, aber jetzt müssen Sie auch sicherstellen, dass Ihr div das Attribut 'tabindex = "- 1"' hat.
Bala Clark
1
Ich musste nur den Tab-Index einstellen.
Weltschmerz
@dchacke, weil die Tastatureigenschaft standardmäßig true ist! Setzen Sie einfach tabindex = '- 1'
nrek
12

tabindex="-1"Attribut zu modal div hinzufügen

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

</div>
Trupti
quelle
3

Im Winkel benutze ich so:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • Hintergrund: 'statisch' => Halten Sie an, um beim Klicken nach außen zu schließen
  • Tastatur: false => Stopp zum Schließen mit der Escape-Taste
Ali Adravi
quelle
-1

Bootstrap 3

In HTML einfach data-backdropauf statisch und data-keyboardauf falsch setzen

Beispiel:

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

oder 

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

Live-Test:

https://jsfiddle.net/sztx8qtz/

Weitere Informationen : http://budiirawan.com/prevent-bootstrap-modal-closing/

Rashedul Islam Sagor
quelle
Ihr Beispiel aktiviert keinen Escape-Schlüssel
Binar Web