【CSS】BootstrapとjQueryで作るモーダルダイアログ（modals）

2020.05.17 2020.01.01

この記事は約7分で読めます。

現役エンジニアがおすすめするプログラミングスクール！

自宅で学べるオンラインのプログラミングスクール【TechAcademy】

TechAcademyはオンライン完結型の受講タイプです。20以上の豊富なコースから好きなものを選択して学習できます。

メンターも質問にきちんと応じてくれて、第13回日本e-Learning大賞、プログラミング教育特別部門賞ともに受賞しています。

Webアプリ、Webデザインのみならず、ブロックチェーンやデータサイエンス、動画作成のコースなど幅広いです。

無料相談はこちら！

Webデザインスクール「デジタルハリウッド STUDIO by LIG」

Web制作会社（株式会社LIG）が運営するスクールなので、より専門的なWebデザイン技術を身につけることが可能です。コンサルタントによる厚い転職支援もあるので、Webデザイナーとしての就職ができます。

未経験でも6ヶ月でWebデザイナーになれます。

無料相談はこちら！

テックキャンプデザイナー転職（旧：【TECH::EXPERT】デザインスクール）

エンジニア転職に向いています。案件が獲得できなかった際は、全額返金保証してくれます。

家にいながら仕事がしたい、副業で収入をあげたい方向けです。

無料相談はこちら！

SkillHacks(スキルハックス) オンラインプログラミングスクール

ハッカソンや開発コンテストで優勝経験ありの実力派エンジニアからWebアプリケーションの開発手法のすべてを学べます。

無料相談はこちら！

ポートフォリオ制作実績

BootstrapとjQueryで作るモーダルダイアログ（modals）を作ります。

青いボタンを押すとそれぞれのモーダルウィンドウが開きます。

[普通のモーダル]

[大きいモーダル]

[小さいモーダル]

このようなモーダルウィンドウを作っていきます。大学生や就活生の方は、プログラミングスクールで就活をしながら、ポートフォリオを作る際に活かしてみてくださいね！

1 【CSS】BootstrapとjQueryで作るモーダルダイアログ（modals）
- 1.1 index.html
2 まとめ

【CSS】BootstrapとjQueryで作るモーダルダイアログ（modals）

index.html

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>

<!– ビューポートの設定–>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>UPDOWN TECH</title>

<!– Bootstrapで使うCSSの読み込み–>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

</head>
<body>

<!– モーダル表示のためのボタン –>
<button class=”btn btn-primary” data-toggle=”modal” data-target=”#modal-example”>
モーダルダイアログ表示
</button>

<!– モーダルの配置 –>
<div class=”modal” id=”modal-example” tabindex=”-1″>
<div class=”modal-dialog”>

<!– モーダルのコンテンツ –>
<div class=”modal-content”>
<!– モーダルのヘッダー –>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”>
<span aria-hidden=”true”>×</span>
</button>
<h4 class=”modal-title” id=”modal-label”>ダイアログ</h4>
</div>
<!– モーダルのボディ –>
<div class=”modal-body”>
ここに内容を書く
</div>
<!– モーダルのフッター –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>閉じる</button>
<button type=”button” class=”btn btn-primary”>保存</button>
</div>
</div>
</div>
</div>

</section>

<hr />

<!– 大きなモーダル –>
<button class=”btn btn-primary” data-toggle=”modal” data-target=”#modal-example1″>
大きなモーダル
</button>

<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal”>
<span aria-hidden=”true”>×</span>
</button>
<h4 class=”modal-title” id=”modal-label”>ダイアログ</h4>
</div>

<div class=”modal-body”>
ここに内容を書く
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>閉じる</button>
<button type=”button” class=”btn btn-primary”>保存</button>
</div>
</div>
</div>
</div>

<hr />

<!– 小さなモーダル –>
<button class=”btn btn-primary” data-toggle=”modal” data-target=”#modal-example2″>
小さなモーダル
</button>

</section>
<!– jQueryの読み込み–>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<!– Bootstrapで使うJavaScriptの読み込み–>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

まとめ

いかがでしたでしょうか。BootstrapさえあればCSSだけでモーダルウィンドウを簡単に作ることができます。

実際にプログラミングして自分の書きたいメッセージを書きこんでみてくださいね。