Bootstrapモーダルをキーボードで閉じる
2014年08月07日(木) 17時23分
Bootstrapのモーダルウインドの機能を使う際、通常では「閉じる」ボタンをクリックする事で、ウインドを閉じ元のページを表示しますが、アクセシビリティ向上のためキーボードのエスケープキー(ESC)でも閉じられるようにする方法をご紹介します。
方法1：data-keyboard="true"を付与する。
Bootstrap Ver. 2.xの場合
Bootstrap Ver. 3.xの場合
方法2：モーダル実行時のオプションにkeyboard: trueを指定する。
$('#myModal').modal({
keyboard: true
});
当然、trueの部分をfalseに変更すれば、キーボード操作は無視されます。
バグ(?) 対策
簡単に確認したところ、最新版のFirefoxやChromeで表示した場合、これだけではキーボードの操作でモーダルを閉じる事が出来ない場合があります。
その場合は、にtabindex="-1"も付与します。