[解決済み] 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リポジトリへのリンクを更新しました)
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Bootstrapのモーダルを閉じる
-
[解決済み】Twitter Bootstrapでモーダル閉鎖イベントを処理する方法は?
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み] Twitter Bootstrap モーダル:スライドダウン効果を削除する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrapのモーダルが表示されない
-
[解決済み] Bootstrap 2.3.2のGLYPHICONS
-
[解決済み] Bootstrap 4.1のbd-highlightとは何ですか?
-
[解決済み] B-tableのBootstrapVue条件列
-
[解決済み】TwitterのBootstrapを使ってインラインでリストを表示する方法
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] Twitter ブートストラップ スクロール可能なテーブル
-
[解決済み] 行を組み合わせたブートストラップ(rowspan)
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?