JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptだけでモーダルボックスを作成する方法【初心者向け解説】

CSSとJavaScriptを組み合わせれば、外部ライブラリに頼らずにシンプルなモーダルボックス（ポップアップダイアログ）を作成できます。この記事では、ボタンをクリックするとモーダルが開き、閉じるボタンや背景部分のクリックで閉じられる実装方法を、サンプルコード付きで詳しく解説します。

実装例：完全なコード

まずは、HTML・CSS・JavaScriptをすべて含んだ完全なコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    .modal {
        text-align: center;
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .modalContent {
        font-size: 20px;
        font-weight: bold;
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    .close {
        color: rgb(255, 65, 65);
        float: right;
        font-size: 40px;
        font-weight: bold;
    }
    .close:hover, .close:focus {
        color: #ff1010;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>Modal Example</h1>
<button class="openModal">Open Modal</button>
<h2>Click on the above button to open modal</h2>
<div class="modal">
<div class="modalContent">
<span class="close">×</span>
<p>Sample text inside modal</p>
</div>
</div>
<script>
    var modal = document.querySelector(".modal");
    var btn = document.querySelector(".openModal");
    var span = document.querySelector(".close");
    btn.addEventListener("click", () => {
        modal.style.display = "block";
    });
    span.addEventListener("click", () => {
        modal.style.display = "none";
    });
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };
</script>
</body>
</html>

コードの仕組みを解説

HTML構造

モーダルは「.modal」（画面全体を覆うオーバーレイ）と「.modalContent」（実際に表示されるコンテンツ部分）の2層構造になっています。.modalContent 内には、右上に配置する閉じるボタン（×）と、モーダル内に表示するテキストを記述します。

CSSスタイルのポイント

.modal クラスには position: fixed と z-index: 1 を指定することで、ページ全体に固定配置されたオーバーレイとして機能させます。初期状態は display: none で非表示にしておき、背景色には rgba(0, 0, 0, 0.4) を指定して半透明の黒いオーバーレイを実現しています。

また、.close:hover と .close:focus のスタイルにより、閉じるボタンにマウスカーソルを合わせたときに色が変化し、cursor: pointer によってクリック可能であることが視覚的に伝わるようになっています。

JavaScriptによる表示・非表示の切り替え

JavaScriptでは、以下の3つの動作を制御しています。

  • 「Open Modal」ボタンのクリック時： modal.style.display = "block" でモーダルを表示します。
  • 閉じるボタン（×）のクリック時： modal.style.display = "none" でモーダルを非表示にします。
  • 背景部分のクリック時： クリックされた要素がモーダル本体（オーバーレイ）そのものである場合のみモーダルを閉じます。これにより、モーダル内のコンテンツをクリックしても誤って閉じてしまうことを防いでいます。

出力結果

上記のコードを実行すると、最初に次のような画面が表示されます。

CSSとJavaScriptだけでモーダルボックスを作成する方法【初心者向け解説】

Open Modal ボタンをクリックすると、画面中央にモーダルボックスが表示されます。

CSSとJavaScriptだけでモーダルボックスを作成する方法【初心者向け解説】

まとめ

このように、CSSの position: fixed によるオーバーレイ表示と、JavaScriptの display プロパティ切り替えを組み合わせるだけで、依存ライブラリなしの軽量なモーダルボックスを実装できます。アニメーション効果を加えたり、複数のモーダルを管理したりと、応用の幅も広いので、ぜひ自分のプロジェクトでも活用してみてください。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini