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

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

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

Bootstrap 3

Beispiel:

Live-Test: