Как включить функцию закрытия escape-клавиши в модальном окне Twitter Bootstrap?

132

Я выполнил инструкции для модального окна Twitter Bootstrap на их главной странице документации
и использовал data-keyboard="true"упомянутый синтаксис, но клавиша escape не закрывает модальное окно.
Что-то еще мне не хватает?

Код:

<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 настойчивость
источник
2
Это включено по умолчанию
Adam F

Ответы:

301

Похоже, это проблема с тем, как привязано событие keyup.

Вы можете добавить tabindexатрибут к вашему модальному окну, чтобы обойти эту проблему:

tabindex="-1"

Итак, ваш полный код должен выглядеть так:

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

Для получения дополнительной информации вы можете просмотреть обсуждение этого вопроса на github.

(Обновлена ​​ссылка на новый репозиторий TWBS)

Крейг МакГрегор
источник
3
Однако это предотвращает автофокусировку полей ввода.
топлес
3
Вы также можете добавить атрибут data-keyboard в свой div.modal (и опустить его в вызывающих объектах), если вы вызываете диалог из нескольких мест.
Виталик Верховодов
2
Как указывает @nrek ниже, закрытие с escape истинно по умолчанию, поэтому вам это не обязательно data-keyboard="true"- это tabindex="-1"активирует поведение
Лео
Я могу подтвердить, что это решение работает в Bootstrap 4. Я не знаю, почему оно не работает по умолчанию, как говорится в документации.
Binar Web
Более того, data-keyboardпринадлежит модальному элементу, а не контроллеру. Это можно проверить, установив для него значение false.
WoodrowShigeru,
23

также, если вы вызываете через javascript, используйте это:

$('#myModal').modal({keyboard: true})
dennisbot
источник
15
раньше это было единственное, что вам нужно было сделать, но теперь вам также нужно убедиться, что ваш div имеет атрибут 'tabindex = "- 1"'.
Бала Кларк
1
Мне нужно было только установить индекс вкладки.
weltschmerz
@dchacke это потому, что для свойства клавиатуры по умолчанию установлено значение true! так что просто установите tabindex = '- 1'
nrek
12

добавить tabindex="-1"атрибут в модальный div

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

</div>
Trupti
источник
3

В angular я использую вот так:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});
  • фон: 'static' => Остановить, чтобы закрыть при нажатии снаружи
  • keyboard: false => Остановить, чтобы закрыть с помощью кнопки выхода
Али Адрави
источник
-1

Bootstrap 3

В HTML просто установите data-backdropзначение static и data-keyboardfalse

Пример :

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

или 

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

Живой тест:

https://jsfiddle.net/sztx8qtz/

Узнать больше: http://budiirawan.com/prevent-bootstrap-modal-closing/

Рашедул Ислам Сагор
источник
Ваш пример не дает ключ побег
Бинар Web