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
źródło
Odpowiedzi:
Wygląda na to, że jest to problem związany ze sposobem wiązania zdarzenia keyup.
Możesz dodać
tabindex
atrybut 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)
źródło
data-keyboard="true"
- to właśnietabindex="-1"
umożliwia zachowaniedata-keyboard
należy do elementu modalnego, a nie do kontrolera. Można to sprawdzić, ustawiając ją nafalse
.również jeśli wywołujesz przez javascript, użyj tego:
$('#myModal').modal({keyboard: true})
źródło
dodaj
tabindex="-1"
atrybut do modalnego div<div id="myModal" class="modal fade" role="dialog" tabindex="-1"> </div>
źródło
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; } } });
źródło
Bootstrap 3
W HTML wystarczy ustawić
data-backdrop
statyczne idata-keyboard
fałszywePrzykł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/
źródło