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

Я выполнил инструкции для Twitter Bootstrap modal на главной странице документации
и использовал упомянутый синтаксис 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>

ОТВЕТЫ

Ответ 1

Похоже, что это проблема с тем, как привязывается событие 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)

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

</div>