手軽にモーダルが作りたいな～
そんなときはBootstrapを使うのがオススメです！
リンク
こんにちは、ティロといいます。
その辺の理系大学生です。
「Bootstrapってなに？」という方はこちら記事をどうぞ！
関連記事
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
モーダルの作り方
モーダルとはどんなものなのか、まずはデモをご覧ください。
ボタンをクリックするとモーダルが表示されます。
See the Pen
pobOyZw by hiro web制作とブログ (@hiroweb9)
on CodePen.
コードは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal"> ボタン </button> <div class="modal" id="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">モーダルのタイトル</h5> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> </div> <div class="modal-body"> <p>リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p> </div> <div class="modal-footer"> モーダルのフッター </div> </div> </div> </div> </body> |
役割はこんな感じです。
| 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の機能をもっと知りたい！という方はこち[…]
こちらの書籍を参考にしました。
Bootstrapの機能がほとんど網羅されているのでかなりオススメです！