BootstrapのModal使う時は data-keyboard="false" にしておく


http://getbootstrap.com/

まあ、同じModalでも画像を表示するとかだったらいいんだが、
大体うちらが作るようなモーダルはそのなかにformがあってなんかを入力するようなmodal だ。
入力中に日本語の変換を間違えたのでescキーを押したらモーダルが消えたんだよ！とクレームが付く。

ということで、モーダルの中身を書く部分に data-keyboard="false" を追加する。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">

こんな感じ。
ついでなんで書いとくと、そのモーダルにAjaxで別ソースを読み込ませたい場合は以下のようにする。

$('#myModal').empty().modal('show').load("another.php");

この方がよく使うだろう。モーダルの中味を別テンプレートにできるし、フォームを動的に生成するphpも別ファイルにできる。