モーダルウィンドウをJavaScriptで実装する方法

Posted on by

Webサイトを訪れた際、よく目にするモーダルウィンドウ。
特定のボタンをクリックすると、画面上に小さなウィンドウがポップアップし、
通知やフォーム、メッセージを表示することができます。
今回は、JavaScriptを使ってシンプルなモーダルウィンドウを実装する方法を解説します。

モーダルウィンドウとは？

モーダルウィンドウは、ユーザーが操作を行うまで他のインターフェースが利用できなくなる、
ポップアップウィンドウの一種です。
例えば、確認メッセージやフォームの入力を促す場面でよく使用されます。

HTML構造を準備する

まず、モーダルウィンドウの基本的なHTML構造を準備します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Example</title>
    <style>
        /* モーダルのスタイル */
        .modal {
            display: none; /* 初期状態では非表示 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h2>モーダルウィンドウのデモ</h2>

<!-- トリガーボタン -->
<button id="openModal">モーダルを開く</button>

<!-- モーダルの構造 -->
<div id="myModal" class="modal">

    <!-- モーダルコンテンツ -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>ここにモーダルの内容が表示されます。</p>
    </div>

</div>

<script>
// モーダル要素を取得
const modal = document.getElementById("myModal");

// ボタン要素を取得
const btn = document.getElementById("openModal");

// 閉じるボタン要素を取得
const span = document.getElementsByClassName("close")[0];

// ボタンがクリックされた時にモーダルを表示
btn.onclick = function() {
    modal.style.display = "block";
}

// 閉じるボタンがクリックされた時にモーダルを非表示
span.onclick = function() {
    modal.style.display = "none";
}

// モーダル外がクリックされた時にモーダルを非表示
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

CSSスタイルを設定する

上記のHTMLコード内で、モーダルウィンドウのスタイルを設定するCSSを記述しています。
特に重要なのは、モーダルを非表示にするための display: none; と、
画面全体を覆う半透明の背景を実現する background-color: rgba(0,0,0,0.5); です。

JavaScriptでモーダルの表示・非表示を制御する

次に、JavaScriptを使ってモーダルウィンドウの動作を制御します。
以下のスクリプトは、ボタンをクリックした時にモーダルを表示し、
閉じるボタンまたはモーダル外をクリックした時にモーダルを閉じる仕組みです。

// モーダル要素を取得
var modal = document.getElementById("myModal");

// ボタン要素を取得
var btn = document.getElementById("openModal");

// 閉じるボタン要素を取得
var span = document.getElementsByClassName("close")[0];

// ボタンがクリックされた時にモーダルを表示
btn.onclick = function() {
    modal.style.display = "block";
}

// 閉じるボタンがクリックされた時にモーダルを非表示
span.onclick = function() {
    modal.style.display = "none";
}

// モーダル外がクリックされた時にモーダルを非表示
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

実際に試してみよう！

このコードをコピーして、ご自身のプロジェクトに取り入れてみてください。
モーダルウィンドウを使うことで、ユーザーに対して重要な情報を際立たせたり、
フォームの入力を促したりすることができます。
シンプルな実装でありながら、非常に便利なUI要素です。

まとめ

今回は、JavaScriptを使った基本的なモーダルウィンドウの実装方法について解説しました。
実際のプロジェクトでは、これを基にスタイルや機能をカスタマイズして、
よりリッチなモーダルウィンドウを作成してみてください。