Bootstrap modalの使い方を紹介！｜modalを正しく使いこなそう
- システム
エンジニア - Bootstrap modalの使い方を教えてください。
- プロジェクト
マネージャー - Bootstrapでのモーダルダイアログの使い方について説明しますので、一緒に見ていきましょう。
Bootstrapでのmodalの使い方とは？
今回は、Bootstrapでのモーダルダイアログの使い方について説明します。モーダルダイアログとは、ボタンクリックなどで表示されるダイアログウィンドウのことです。
ここでは、モーダルダイアログについて、「基本的な使い方」「フェードイン」「センター表示」「フォーム」の4つを紹介します。
基本的な使い方
Bootstrapでのモーダルダイアログの基本的な使い方を紹介します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Bootstrap modal
</button>
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalLabelId">modal title</h3>
</div>
<div class="modal-body">
<label>mobal body</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
|
See the Pen
bootstrap_modal1 by kskumd (@kskumd)
on CodePen.
modal-headerは、タイトルなどを記述するヘッダー部分です。
modal-bodyは、内容を記述するボディ部分です。
modal-footerは、ボタンなどを配置するフッター部分です。
フェードイン
Bootstrapでは、div class=”modal fade”を指定することで、モーダルダイアログがフェードインします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Bootstrap modal fade-in
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalLabelId">modal title</h3>
</div>
<div class="modal-body">
<label>mobal body</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
|
See the Pen
bootstrap_modal2 by kskumd (@kskumd)
on CodePen.
センター表示
Bootstrapでは、modal-dialog-centeredを指定することで、モーダルダイアログをセンターに表示できます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Bootstrap modal center
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalLabelId">modal title</h3>
</div>
<div class="modal-body">
<label>mobal body</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
|
See the Pen
bootstrap_modal3 by kskumd (@kskumd)
on CodePen.
フォーム
Bootstrapでは、モーダルダイアログには、formの要素を記述することもできます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Bootstrap modal form
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="modalLabelId">modal title</h3>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="title-text" class="col-form-label">Title:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
|
See the Pen
bootstrap_modal4 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - Bootstrapでのモーダルダイアログの「基本的な使い方」「フェードイン」などが理解できました。
- プロジェクト
マネージャー - 使い方が理解できたら、実際にソースコードで指定してみましょう。
Bootstrap modalを正しく使いこなそう
いかがでしたでしょうか。Bootstrapでのモーダルダイアログについて、「基本的な使い方」「フェードイン「センター表示」「フォーム」の4つを紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
CSS新着案件New Job
-
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務
月給65万～65万円東京都中央区(新富町駅) -
Webシステム開発/東京都江東区/【WEB面談可】/テレワーク
月給32万～34万円東京都江東区(豊洲駅) -
Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】
月給33万～48万円東京都千代田区(神田駅) -
空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】
月給60万～70万円神奈川県鎌倉市(大船駅) -
空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】
月給50万～60万円神奈川県鎌倉市(大船駅)
関連記事Related Posts
-
Bootstrapでのnavbarの使い方の紹介｜navbarを正しく使いこなそう
Bootstrapでのnavbarの使い方とは？ 今回は、Bootstrapでのnavbarの使い方について説明します。 navbarとは、ナビゲーションバーを表示するものです。 ここでは、以下を紹介します。 ・基本的な […]
-
BootstrapでのTooltipの使い方とは？Tooltipのオプションも紹介
BootstrapでのTooltipの使い方とは？ 今回は、BootstrapでのTooltipの使い方について説明します。Tooltipとは、要素にマウスオーバーした際に注釈などが表示されるものです。Tooltipには […]
-
Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法
Bootstrapでの左寄せ・中央寄せ・右寄せの方法とは？ 今回は、Bootstrapでの左寄せ・中央寄せ・右寄せの方法について説明します。 ここでは、以下の左寄せ・中央寄せ・右寄せについて紹介します。 ・テキスト ・ブ […]
-
【初心者におすすめ】Bootstrap4を学ぶのに最適な本2選
現在、WebデザインやWebフロントエンドの開発現場では、BootstrapのようなWebフレームワークの理解と習熟が必要になっています。Bootstrapはデバイスごとの様々な画面サイズに柔軟に対応したレスポンシブデザ […]
-
Bootstrapでのalertの使い方を紹介｜alertを正しく使いこなそう！
Bootstrapでのalertの使い方とは？ 今回は、Bootstrapでのalertの使い方について説明します。 ここでは、以下について説明します。 ・背景色の指定 ・リンクテキストの色指定 ・ヘッダの色指定 ・削除 […]
