132

Postępowałem zgodnie z instrukcjami dla modułu Twitter Bootstrap na ich głównej stronie dokumentacji
i użyłem data-keyboard="true"wspomnianej składni, ale klawisz Escape nie zamyka okna modalnego.
Czy jest coś jeszcze, czego mi brakuje?

Kod:

<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

— wytrwałość
źródło

2

Jest to domyślnie włączone

— Adam F

304

Wygląda na to, że jest to problem związany ze sposobem wiązania zdarzenia keyup.

Możesz dodać tabindexatrybut do swojego modalu, aby obejść ten problem:

tabindex="-1"

Twój pełny kod powinien więc wyglądać następująco:

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

Aby uzyskać więcej informacji, możesz obejrzeć dyskusję na ten temat na github

(Zaktualizowany link do nowego repozytorium TWBS)

— Craig MacGregor
źródło

3

To jednak zapobiega autofokusowi z pól wejściowych.

— topless

3

Możesz także dołączyć atrybut data-keyboard do swojego div.modal (i pomijać go w wywoływaczach), jeśli wywołasz to okno dialogowe z wielu miejsc.

— Vitalik Verhovodov

2

Jak @nrek wskazuje poniżej - zamknięcie z ucieczką jest domyślnie prawdziwe, więc nie jest to konieczne data-keyboard="true"- to właśnie tabindex="-1"umożliwia zachowanie

— Leo

Mogę potwierdzić, że to rozwiązanie działa w Bootstrap 4. Nie wiem, dlaczego nie działa domyślnie, jak mówią doktorzy.

— Binar Web

Ponadto data-keyboardnależy do elementu modalnego, a nie do kontrolera. Można to sprawdzić, ustawiając ją na false.

— WoodrowShigeru

24

również jeśli wywołujesz przez javascript, użyj tego:

$('#myModal').modal({keyboard: true})

— dennisbot
źródło

15

kiedyś była to jedyna rzecz, jaką musiałeś zrobić, ale teraz musisz również upewnić się, że element div ma atrybut „tabindex =" - 1 "”.

— Bala Clark,

1

Musiałem tylko ustawić indeks zakładek.

— weltschmerz

@dchacke to dlatego, że właściwość klawiatury ma domyślnie wartość true! więc po prostu ustaw tabindex = '- 1'

— nrek

12

dodaj tabindex="-1"atrybut do modalnego div

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

</div>

— Trupti
źródło

3

W kątowym używam w ten sposób:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

backdrop: 'static' => Zatrzymaj się, aby zamknąć po kliknięciu na zewnątrz
keyboard: false => Zatrzymaj, aby zamknąć, używając przycisku ucieczki

— Ali Adravi
źródło

-1

Bootstrap 3

W HTML wystarczy ustawić data-backdropstatyczne i data-keyboardfałszywe

Przykład:

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

lub

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

Test na żywo:

https://jsfiddle.net/sztx8qtz/

Dowiedz się więcej: http://budiirawan.com/prevent-bootstrap-modal-closing/

— Rashedul Islam Sagor
źródło

Twój przykład nie włącza klawisza Escape

— Binar Web

Jak włączyć funkcję zamykania klawisza Escape w trybie Twitter Bootstrap?

Bootstrap 3

Przykład:

Test na żywo: