というわけで前回の続きをやっていきます。
今回やるのは
- 挙動制御はデータの属性ではなくJavaScript制御にしたい
- モーダル起動のフォームがリンクになっているのでボタンにしたい。
- モーダルの中身を修正したい
- ボタンのテキストを変えたい
というできる人なら速攻でできそうなヤツです。
でもワタクシはできる人ではないので少しずつ見ていきます。
JavaScriptで動かす場合は、
コントローラフォーム(『押したときにモーダルを立ち上げようとするボタンとかリンク』のこと)のclickイベントをハンドリングして、modal('show');
を呼び出すとモーダルが立ち上がる、という感じなので以下のコードになりました。
htmlのほう
クリックイベントでモーダルを立ち上げるJavaScriptは以下のカンジ
#ムロンreadyイベント中にハンドリングしている
// イベント詳細ボタンが押されたらモーダル立ち上げ
$("#button-showmodal").click(function(){
// HTMLで定義したtestModalをセレクトしてモーダルメソッドを呼び出し
$("#testModal").modal('show');
});
ソースコメントにも記載したけど、モーダルを表示させる際のポイントは以下のカンジ
- アンカー(a)からボタン(button)に変える際にはボタンのclickイベントハンドリング用にidを加えておく(とやりやすい)
- 不要属性(data-attributeでmodalを制御する用)のhrefとdata-toggleは消す
- ボタンのクリックイベントでmodal('show'); をモーダルのdivに対して呼び出す
で、モーダルの中身を記述する際のポイントは下記
- モーダルの中身はヘッダー/ボディ/フッターというおなじみの3パーツで構成されている
- class属性にmodal-headerとか指定することでモーダルのheaderとして表示される(bootstrapのJavaScriptとCSSに『これはmodalのヘッダーだよ』と伝えることができる)
- モーダルを閉じるコントローラにはdata-dismiss="modal"を指定することでモーダルを閉じる機能を追加できる(と思われる)
モーダルが3部構成することだけわかっていれば、あとはその各パーツに好きなHTML書けば好きなように表示できるはずだ。
というわけで今回は一旦以上。
次回はajaxのmodalだ。