モーダルを開くボタンが複数あり、クリックしたボタンによって表示内容を変える方法です。
モーダルを開くときに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を使えばもっとシンプルに書けますね。
コメントを残す