(Sample)
Bootstrapのモーダルウィンドウは、ユーザーインターフェースにポップアップを追加するためのコンポーネントです。
設定は簡単で、動的なコンテンツ表示、フォームの入力、確認メッセージなどに使用されます。レスポンシブ対応で、デザインも洗練されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>modal.html</title>
</head>
<body>
<a href="#" id="closeWindow">このウィンドウを閉じる</a>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを開く
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
モーダルの内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存する</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script>
document.getElementById('closeWindow').addEventListener('click', function(event) {
event.preventDefault();
window.close();
});
</script>
<script src="script.js"></script>
</body>
</html>このコードのポイントは以下のとおりです。
モーダルを開くためのボタン:
data-bs-toggle="modal": ボタンをクリックしたときにモーダルを表示するための属性です。data-bs-target="#exampleModal": どのモーダルを開くかを指定しています。
モーダルウィンドウの構造:
id="exampleModal"で、モーダルを一意に識別します。modal-dialogクラスでモーダルのダイアログを定義します。modal-contentクラスでモーダルの全体のコンテンツをラップします。- modal-headerクラスでタイトルと閉じるボタンを含むヘッダー部分です。
- modal-bodyクラスでモーダルの主な内容が表示される部分です。
- modal-footerクラスはアクションボタン（閉じる、保存する）を含むフッター部分です。
Bootstrapのモーダルの表示位置や大きさを変更したい場合、modal-dialogにクラスやスタイルを追加することでカスタマイズできます。以下に詳しく説明します。
モーダルの「表示位置」を変更する
デフォルトではモーダルは画面中央に表示されますが、位置を変更するにはmodal-dialogにCSSを適用します。
例：モーダルを上部に表示したい場合
<div class="modal-dialog modal-dialog-centered" style="margin-top: 10%;">他の位置（左寄せ・右寄せなど）も自由に調整可能：
<div class="modal-dialog" style="margin: 5% auto 0 auto;">
margin-top: 上からの距離margin-leftやauto: 横方向の位置調整
モーダルの「大きさ」を変更する
Bootstrapにはあらかじめ以下のクラスが用意されています：
| クラス名 | サイズ |
|---|---|
modal-sm | 小さい |
modal-lg | 大きい |
modal-xl | 特大 |
例：大きいモーダルにしたい場合
<div class="modal-dialog modal-lg">
自由なサイズをCSSで設定したい場合
<div class="modal-dialog" style="max-width: 800px; width: 90%;">
カスタマイズ適用例（表示位置と大きさを変更）
<div class="modal-dialog modal-lg" style="margin-top: 5%; max-width: 800px;">
補足：中央寄せのためのクラス
<div class="modal-dialog modal-dialog-centered">
これはモーダルを画面縦方向中央に配置するBootstrapの便利なクラスです。
以上。