Bootstrap4 基本チュートリアル

Bootstrap4 モーダルボックス

モーダルは、ユーザーに重要な情報を提供したり、ユーザーが次のアクションを取る前に必要な操作を行うことを促すためのダイアログやポップアップウィンドウです。モーダルは、セッションタイムアウトなどの警告ユーザー、または重要なデータ（例えば保存や削除）の操作を実行する前に最終確認を求めるために広く使用されます。

Bootstrapのモーダルプラグインを使用すると、非常にスマートで柔軟なダイアログを作成することができます。

モーダルウィンドウ（Modal）は、親ウィンドウの上に覆われた子ウィンドウです。通常、独立したソースからのコンテンツを表示し、親ウィンドウを離れずにいくつかのインタラクションを行うことを目的としています。子ウィンドウは、情報表示やインタラクションなどを行うことができます。

モーダルウィンドウの作成方法

以下の例では、タイトル、メッセージ本文、ユーザーアクションボタンを含むフッターを持つシンプルなモーダルウィンドウの基本構造を概説しています。以下の例では、シンプルなモーダルウィンドウ効果を作成する方法を示しています：

例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>モーダルウィンドウ例</h2>
　　<!--　ボタン：モーダルウィンドウを開くためのもの　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　モーダルウィンドウを開く
　　</button>
　　　
　　<!--　モーダルボックス　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　<!--　モーダルボックスのヘッダー　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">モーダルボックスのヘッダー</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスのメイン　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　モーダルボックスの内容..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスの下部　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">閉じる</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

テストをしてみる ‹/›

実行後の効果は以下の通りです:

モーダルウィンドウのサイズ

私たちは .modal-sm クラスを使って小モーダルウィンドウを作成します，.modal-lg クラスを使って大モーダルウィンドウを作成できます。

サイズクラスは <div>要素の .modal-dialog クラスの後に：

例 - 小モーダルウィンドウ

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>モーダルウィンドウ例</h2>
　　<!--　ボタン：モーダルウィンドウを開くためのもの　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　モーダルウィンドウを開く
　　</button>
　　　
　　<!--　モーダルボックス　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　<!--　モーダルボックスのヘッダー　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">モーダルボックスのヘッダー</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスのメイン　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　モーダルボックスの内容..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスの下部　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">閉じる</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

テストをしてみる ‹/›

実行後の効果は以下の通りです:

例 - 大モーダルウィンドウ

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>モーダルウィンドウ例</h2>
　　<!--　ボタン：モーダルウィンドウを開くためのもの　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　モーダルウィンドウを開く
　　</button>
　　　
　　<!--　モーダルボックス　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　<!--　モーダルボックスのヘッダー　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">モーダルボックスのヘッダー</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスのメイン　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　モーダルボックスの内容..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　モーダルボックスの下部　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">閉じる</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

テストをしてみる ‹/›

実行後の効果は以下の通りです:

Bootstrap4 チップ Bootstrap4 スライダー