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


2017年2月28日

今回とあるサイトを開発した際に、メニューに利用しました、
Bootstrapを利用して、お手軽にモーダルウィンドウを使う方法をご紹介。

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

1.開くボタンを設置

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

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

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