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

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

Bootstrap 3

Пример :

Живой тест: