【Bootstrap4 初心者向け、簡単】モーダルの作り方を分かりやすく解説します

modalの作り方
手軽にモーダルが作りたいな~

そんなときはBootstrapを使うのがオススメです!

 

ティロ

こんにちは、ティロといいます。

その辺の理系大学生です。

 

「Bootstrapってなに?」という方はこちら記事をどうぞ!

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方

 




 

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

モーダルの作り方

モーダルとはどんなものなのか、まずはデモをご覧ください。

ボタンをクリックするとモーダルが表示されます。

 

See the Pen
pobOyZw
by hiro web制作とブログ (@hiroweb9)
on CodePen.


コードは以下のようになります。

 

役割はこんな感じです。

btn装飾が一切ないボタン(デフォルトの装飾が解除されている状態)
btn-primaryボタンの色を青にします
data-toggle=”modal”jsの制御
data-target=”#modal”モーダルのダイアログのターゲットを決めます
class=”modal”  id=”modal”クラスはモーダルの枠を作る。idはdata-targetに設定したもの(ここではmodal)を指定します
modal-dialogモーダルのダイアログの枠を作ります
modal-contentモーダルの内容
modal-headerモーダルのヘッダー
modal-titleモーダルのタイトル
close閉じるボタンの位置決め
data-dismiss=”modal”モーダルの閉じるアニメーション
modal-bodyモーダルの本文
modal-footerモーダルのフッター

 

ボタンの色はカスタマイズすることが出来ます。

今回はbtn-primaryとしているためボタンは青いですが、btn-()の()を変えることで簡単にボタンの色を変更することが出来ます。

primary
secondaryグレー
success
warning
info水色
light薄いグレー
dark濃いグレー
white
transparent透明
danger

 

Bootstrapを使うとcss、jsを記述しなくても簡単にモーダルを実装できました!

ここまでお読みいただきありがとうございました!

こちらの記事もオススメです!

関連記事

bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます!もちろん、レスポンシブデザインに対応しています。 ティロこんにちは、テ[…]

ドロップダウンメニューの作り方

 

こちらの書籍を参考にしました。

Bootstrapの機能がほとんど網羅されているのでかなりオススメです!