Bootstrap
[Bootstrap] モーダルウィンドウを使ってみる
はち
更新日:2021/08/11
先日とあるサイトを開発した際に、メニューにモーダルウィンドウを利用しました。
今回はBootstrapを利用して、お手軽にモーダルウィンドウを使う方法をご紹介。
モーダルウィンドウは、様々な活用シーンが有るかと思いますが、特にスマホのページなどで活躍すると思います。
1.開くボタンを設置
|
1 2 |
<!-- モーダルウィンドウを開くボタン --> <a class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">ひらくよ</a> |
このdata-targetで指定した、ID：myModalをページの何処かに定義しておきます。
その定義したIDをモーダルウィンドウとして、開くことが出来ます。
2.モーダルウィンドウを作る
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- モーダルウィンドウの中身 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> もーだるのへっだ </div> <div class="modal-body"> もーだるのなかみ </div> </div> </div> </div> |
たったのコレだけです。
後はモーダルの中身をメッセージダイアログで使うもよし、メニューで使うも良し、アレンジシてみてください:)