Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:Bootstrap
タグ:
公開日:2017/02/21(火)
最終更新日:2021/08/11(水)

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

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

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

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

1.開くボタンを設置

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

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

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

この記事を書いた人:はち
野球と競馬のデータが好きな男。 裏の姿は夜な夜な競馬予想AIのメンテを続けている中年。


シェアのご協力をお願いいたします!

カテゴリー

アーカイブ