(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クラスはアクションボタン（閉じる、保存する）を含むフッター部分です。
以上。