[Bootstrap] Modal dialog(モーダル・ダイアログ)の使い方

Bootstrapのモーダル・ダイアログの使い方についてです。モーダル・ダイアログ(モーダル・ウィンドウ)は開いたダイアログを閉じるまで、他の操作が行えない形のダイアログボックスになります。入力必須の項目を入力させる場合、他の操作を行われては困る場合などにモーダル・ダイアログボックスはよく利用されます。

JavaScriptとCSSの読み込み

jQueryやBootstrapのJSを自分のサーバーにアップしても良いですが、CDNを使えばリンクを貼るだけで良いので、下記のように header 部分にリンクを記載しましょう。これだけでBootstrapとjQueryが使えるようになります。

作成するモーダルダイアログのイメージ

Bootstrap モーダル
ページに「Modal Open」というボタンが表示されます。これをクリックするとモーダル・ダイアログが表示されます。

Bootstrap モーダル
保存ボタンを押しても何も起こりません。「閉じる」ボタンを押すとモーダル・ダイアログが閉じます。

HTML

コードの解説

モーダル・ダイアログを開くためのボタンを作ります。下記の2つの項目を記載するところがポイントです。
・data-toggle=”modal”
・data-target=”#sampleA” ←ここには5行目で指定するidに #を付けた値を設定してください。これでボタンをクリックした時に指定した id の内容が表示されるようになります。

div の class に modal を、 id に任意の文字(今回は sampleA )を指定します。

ここでは div の class に modal-dialog を指定します。

ここでは div の class に modal-content を指定します。この div の中にモーダル・ダイアログに表示させたいコンテンツを記述していきます。コンテンツの中には modal-header , modal-body , modal-footer というレイアウト区分が用意されています。

モーダル・ダイアログを閉じるには data-dismiss=”modal”を指定します。

このままでは保存ボタンを押しても何も起こりません。実用的にするにはこのボタンにidを設定し、保存ボタンが押されたときにAjaxでデータを送り、DBに保存させるようにします。



Author: webmaster