(Sample)
解説
モーダルウィンドウとは、ウェブページ上でユーザーの注意を引くために一時的に表示される小さなウィンドウのことです。
主に情報の提示、入力フォーム、確認メッセージなどに使用されます。
モーダルウィンドウは、背景のコンテンツをぼかしたり暗くしたりして、ユーザーのフォーカスをウィンドウ内の内容に集中させます。
閉じるまで他の操作ができないため、重要なアクションの確認やエラーの通知に効果的です。
モーダルウィンドウの実装には、HTML、CSS、JavaScriptが使用されます。
HTMLでウィンドウの構造を作成し、CSSでデザインとスタイルを設定し、JavaScriptで表示と非表示の制御を行います。
以下の例のようにBootstrapなどのフレームワークを使用すると、モーダルウィンドウの作成が簡単になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景をぼかしたモーダルウィンドウ</title>
<!-- 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">
<style>
body {
position: relative;
min-height: 100vh; /* 画面全体の高さを確保 */
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('img/surfing.jpg'); /* 背景画像の指定 */
background-size: cover; /* 画像をコンテナ全体に表示 */
background-position: center; /* 画像を中央に配置 */
z-index: -1; /* 背景画像を背面に配置 */
}
.blur-background {
filter: blur(2px); /* ぼかし効果を適用 */
}
.content {
position: relative;
z-index: 1; /* 背景画像の上に表示 */
}
</style>
</head>
<body>
<!-- 背景画像 -->
<div class="background-image"></div>
<!-- コンテンツ -->
<div class="container content">
<h1>背景をぼかしたモーダルウィンドウの例</h1>
<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
モーダルを開く
</button>
</div>
<!-- モーダル -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="閉じる"></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>
<!-- BootstrapのJavaScriptを読み込み -->
<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.addEventListener('DOMContentLoaded', function () {
let modal = document.getElementById('exampleModal'); // モーダル要素を取得
let background = document.querySelector('.background-image'); // 背景画像要素を取得
// モーダルが表示されるときに背景をぼかす
modal.addEventListener('show.bs.modal', function () {
background.classList.add('blur-background');
});
// モーダルが閉じられるときに背景のぼかしを解除
modal.addEventListener('hidden.bs.modal', function () {
background.classList.remove('blur-background');
});
});
</script>
</body>
</html>
HTMLのポイント
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">class="modal fade"
modal クラスは、Bootstrapのモーダルウィンドウのスタイルを適用するために使用されます。モーダルウィンドウの基本的なデザインとレイアウトが適用されます。
fade クラスは、モーダルが表示されるときや非表示になるときにフェード効果を追加します。モーダルの表示・非表示のトランジションが滑らかになります。
tabindex="-1"
この属性は、要素がフォーカスを受け取らないようにします。モーダルウィンドウが開かれているとき、キーボード操作によるフォーカスがモーダルウィンドウ内の要素に制限されるようにするための設定です。
aria-hidden="true"
この属性は、モーダルウィンドウが初期状態で非表示であることを示します。モーダルが表示されるときには、この属性が false に変更されます。
JavaScriptのポイント
modal.addEventListener('show.bs.modal', function () {...});:
- 目的: モーダルウィンドウが表示されるときのイベントをリッスンし、その際に特定の処理を実行するためのリスナーを追加します。
'show.bs.modal': Bootstrapのモーダルが表示される直前に発生するカスタムイベントです。このイベントを使用することで、モーダルが表示されるタイミングに合わせて処理を実行できます。- コールバック関数: このイベントが発生したときに実行される無名関数（コールバック関数）が定義されています。
background.classList.add('blur-background');:
- 目的: 背景をぼかすために、背景画像の要素に特定のCSSクラスを追加します。
background: 背景画像の要素を指します。これは事前にdocument.querySelector('.background-image')などで取得されています。classList.add('blur-background'): 指定したクラス（ここでは'blur-background'）を要素に追加します。これにより、CSSで定義されたぼかし効果（filter: blur(2px);）が適用されます。
modal.addEventListener('hidden.bs.modal', function () {...});:
- 目的: モーダルウィンドウが閉じられるときのイベントをリッスンし、その際に特定の処理を実行するためのリスナーを追加します。
'hidden.bs.modal': Bootstrapのモーダルが完全に閉じられた後に発生するカスタムイベントです。このイベントを使用することで、モーダルが閉じられたタイミングに合わせて処理を実行できます。
background.classList.remove('blur-background');:
- 目的: 背景のぼかし効果を解除するために、背景画像の要素から特定のCSSクラスを削除します。
classList.remove('blur-background'): 指定したクラス（ここでは'blur-background'）を要素から削除します。これにより、CSSで定義されたぼかし効果が解除されます。