【Bootstrap】モーダルにデータを渡したい

モーダルを開くボタンが複数あり、クリックしたボタンによって表示内容を変える方法です。

モーダルを開くときにdata属性から情報を取得して、その情報をもとに表示内容を変えたいといったケースもありますね。

ドキュメントを見ていて、JavaScriptでモーダルを開閉する方が簡単に実現できそうだと思い、整理しました。

モーダルの基本的な使い方

まずBootstrapが使えるように最低限のHTMLを用意します。

Bootstrapのドキュメントに、スターターテンプレートとして用意されているので、コピーしてきます。

.htmlに貼り付けてブラウザで開くと、「Hello, world!」と表示されるはずです。

これでBootstrapを使うための最低限の設定が完了しました。

モーダルの使い方については、ドキュメントのモーダルのページにあります。

ここからモーダルのサンプルのコードをコピーして、16行目以降に追記します。

17行目のbuttonタグのdata属性でモーダルの設定が行われています。

ブラウザで表示を確認すると、「Launch demo modal」というボタンが表示され、クリックするとモーダルが出てくると思います。

これがBootstrapでのモーダルの基本的な使い方になります。

JavaScriptでモーダルの開閉をする

ドキュメントのモーダルページを読んでいくと、JavaScriptでモーダルの開閉が可能であることが分かります。

JavaScriptでは次のように処理を書くことができます。

17行目のbuttonタグのdata属性は削除しました。

このままだとボタンをクリックしてもモーダルは表示されないはずです。

50-56行目のコードでモーダルが開くようにしています。

51行目でモーダルを操作するためのインスタンスを取得していますが、getElementByIdの引数として、モーダルのdivタグのidを指定しました。

52行目でモーダルを開くbuttonを取得して、53行目でクリックした時の処理を記述しています。

モーダルを開いているのは次のコードです。

myModal.show()

ちなみに、モーダルを閉じるときには次のようにします。

myModal.hide()

先ほどと同じように、「Launch demo modal」ボタンをクリックするとモーダルが表示されるはずです。

ボタンによって表示内容を切り替える

クリックしたボタンによってモーダルの表示内容を変える方法です。

例えばdata属性にidを持たせて、Ajaxでデータ取得してモーダルの表示内容を変えたいときなどに使えると思います。

今回は簡単のためにdata属性にモーダルのタイトルを入れて、表示を切り替えてみます。

次のようなコードで実現できるはずです。

17-25行目のでボタンを3つにして、data-modal-titleにモーダルのタイトルを指定しています。

ボタンが複数あるので、60行目で繰り返しのforを使っています。

62行目でデータ属性で設定したモーダルのタイトルを取得して、62行目でタイトルを変更しています。

ブラウザで確認するとボタンが3つ表示されて、それぞれモーダルのタイトルが異なっているはずです。

これだけで実現できました。

ちなみに、Bootstrap 5でもjQueryでモーダルを操作することは可能です。

jQueryを使えばもっとシンプルに書けますね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です