1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?

2022-06-10 21:29:44

質問

の説明書に従って Twitter Bootstrap モーダルの説明に従い、メイン ドキュメント ページにある

を使用し data-keyboard="true" の構文を使用しましたが、エスケープキーがモーダルウィンドウを閉じません。

他に何か見落としているものがあるのでしょうか?

コードです。

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

どのように解決するのですか?

キーアップイベントのバインド方法に問題があるように思われます。

この問題を解決するには 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>

より詳細な情報は での議論を見ることができます。

(新しいTWBSリポジトリへのリンクを更新しました)