Scroll

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

カテゴリ:Bootstrap Web/DTP
タグ:
公開日:2017/02/21(火)

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

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

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

1.開くボタンを設置

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

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

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

この記事を書いた人:はち

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

カテゴリー

アーカイブ