開発メモ,主に補足by子連れ親父プログラマー

2014-02-16

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

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も別ファイルにできる。

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー