B3Sロゴ
menu close

Bootstrap

[Bootstrap] モーダルウィンドウを使ってみる


はち

更新日:2021/08/11


先日とあるサイトを開発した際に、メニューにモーダルウィンドウを利用しました。

今回はBootstrapを利用して、お手軽にモーダルウィンドウを使う方法をご紹介。

モーダルウィンドウは、様々な活用シーンが有るかと思いますが、特にスマホのページなどで活躍すると思います。

1.開くボタンを設置

このdata-targetで指定した、ID:myModalをページの何処かに定義しておきます。
その定義したIDをモーダルウィンドウとして、開くことが出来ます。

2.モーダルウィンドウを作る

たったのコレだけです。
後はモーダルの中身をメッセージダイアログで使うもよし、メニューで使うも良し、アレンジシてみてください:)