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

CSSとJavaScriptで削除確認モーダルを作成する方法【初心者向け解説】

Webアプリケーションでは、アカウントの削除など重要な操作を実行する前に、ユーザーに確認を求める「確認モーダル」がよく使われます。誤操作を防ぎ、ユーザーエクスペリエンスを向上させるために非常に有効なUIパターンです。

この記事では、CSSとJavaScript（バニラJS）のみを使用して、シンプルで実用的な削除確認モーダルを作成する方法を解説します。外部ライブラリは不要なので、そのままコピーして使うこともできます。

完成コードの全体像

以下のコードでは、「Open Modal」ボタンをクリックするとモーダルが表示され、「Delete Account」ボタン・「Cancel」ボタン・閉じるアイコン（×）・背景部分のいずれかをクリックするとモーダルが閉じる仕組みになっています。

<!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;
    }
    .modalContent button {
        border: none;
        border-radius: 4px;
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
    }
    .del {
        background-color: rgb(255, 65, 65);
    }
    .del:hover {
        background-color: rgb(255, 7, 7);
    }
    .cancel:hover {
        background-color: rgb(167, 167, 167);
    }
</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">&times;</span>
<p>Are you sure you want to delete your account</p>
<button class="del" onclick="hideModal()">Delete Account</button>
<button class="cancel" onclick="hideModal()">Cancel</button>
</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", () => {
        hideModal();
    });
    function hideModal() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) {
            hideModal();
        }
    };
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まず次のような画面が表示されます。

CSSとJavaScriptで削除確認モーダルを作成する方法【初心者向け解説】

「Open Modal」ボタンをクリックすると、半透明の黒いオーバーレイとともに確認モーダルが中央に表示されます。

CSSとJavaScriptで削除確認モーダルを作成する方法【初心者向け解説】

コードのポイント解説

1. モーダルの基本構造

モーダルは .modal（背景オーバーレイ）と .modalContent（ダイアログ本体）の2層構造になっています。position: fixed; を指定することで、スクロール位置に関係なく画面全体に固定表示されます。

2. 表示・非表示の切り替え

初期状態では display: none; で非表示にしておき、ボタンがクリックされたタイミングでJavaScriptの modal.style.display = "block"; によって表示に切り替えます。逆に閉じる場合は display: none; に戻すだけです。

3. 背景クリックで閉じる処理

window.onclick のイベントハンドラ内で、クリックされた要素（event.target）がモーダル背景そのものである場合にのみモーダルを閉じています。これにより、ダイアログ本体をクリックしたときは誤って閉じないよう制御しています。

4. UXを高めるための工夫

  • 削除ボタンは赤系の色にして、破壊的な操作であることを視覚的に伝えています。
  • ホバー時の色変化（:hover）で、ボタンが押せることを明確に示しています。
  • 右上の「×」アイコンでも閉じられるため、ユーザーが迷わず操作できます。

まとめ

CSSとJavaScriptだけで、ライブラリに依存しない削除確認モーダルを簡単に実装できることが分かりました。この基本形をベースに、フェードイン・アウトのアニメーション追加や、フォーム入力との連携など、プロジェクトに合わせてカスタマイズしてみてください。

  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

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

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