2025.05.09

JavaScriptの確認ダイアログをおしゃれに！CSS＋jQueryでモーダル実装する方法

jQuery/ confirm / カスタマイズ / css/ javascript/ 確認ダイアログ / モーダル実装 / おしゃれ

JavaScriptの確認ダイアログをおしゃれに！CSS＋jQueryでモーダル実装する方法

JavaScript の window.confirm() を使えば簡単に確認ダイアログを表示できますが、以下のようなデメリットがあります。

デザインのカスタマイズができない

ブラウザによって見た目が違う

背景のスクロールロックなどの制御が難しい

表示される文字を自由にカスタマイズできない

そこで今回は、jQueryとCSSだけで実装できるシンプルかつデザイン性の高い「オリジナルのconfirmボックス」を紹介します。

1
実装イメージ
2
JavaScript（jQuery）

2-1

解説

3
CSS（モーダルの見た目）

3-1

解説

4
使用例（呼び出し方）
5
まとめ

実装イメージ

「はい」ボタンを押せば処理を実行、「いいえ」ボタンを押せばキャンセルします。ダークな背景でモーダル風に表示され、レスポンシブにも対応しています。

このダイアログは文字も自由に変更できるという点にあります。

JavaScript（jQuery）

まずは、カスタム確認ボックスを表示する関数を作成します。

// 確認ボックス
function confirm_box(title, message, callback) {
    var confirm_box_container = $('<div class="confirm_box_container"></div>');
    var confirm_box = $('<div class="confirm_box"></div>');
    confirm_box.html(`
        <h2 class="confirm_box_title">` + title + `</h2>
        <p class="confirm_box_message">` + message + `</p>
        <div class="confirm_button_container">
            <div class="cancel_button">いいえ</div>
            <div class="confirm_button">はい</div>
        </div>
    `);

    confirm_box_container.append(confirm_box);
    confirm_box_container.appendTo('body');

    // 「はい」ボタン
    confirm_box_container.on('click', '.confirm_button', function () {
        confirm_box_container.remove();
        callback(); // 実行したい処理を呼び出す
    });

    // 「いいえ」ボタン
    confirm_box_container.on('click', '.cancel_button', function () {
        confirm_box_container.remove();
    });
}

解説

この関数 confirm_box(title, message, callback) は以下のような構成です：

title：ダイアログのタイトル文字列

message：メッセージ内容

callback：ユーザーが「はい」を選択した際に実行する関数

jQueryでDOM要素を生成し、クリックイベントをハンドリングしてモーダルを消したり処理を実行したりしています。

CSS（モーダルの見た目）

次に、この確認ボックスにスタイルを当ててモーダル表示にします。レスポンシブ対応もしています。

.confirm_box_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: start;
    justify-content: center;
}

.confirm_box_container .confirm_box {
    width: 60rem;
    background: white;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: 0px 2px 8px 0 #676767;
    margin-top: 2%;
}

.confirm_box_container .confirm_box_title {
    font-size: 2rem;
    font-weight: 400;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.1rem solid #a3a3a3;
    width: 100%;
}

.confirm_box_container .confirm_box_message {
    font-size: 1.6rem;
    height: 13rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm_box_container .confirm_button_container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 5rem;
    font-size: 1.6rem;
}

.confirm_box_container .confirm_button_container .confirm_button {
    width: 25rem;
    height: 4rem;
    background: #d31a1a;
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.confirm_box_container .confirm_button_container .confirm_button:hover {
    background: #a31a1a;
}

.confirm_box_container .confirm_button_container .cancel_button {
    width: 25rem;
    height: 4rem;
    border: 0.1rem solid #000000;
    background: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.confirm_box_container .confirm_button_container .cancel_button:hover {
    box-shadow: 0 0 7px 0 rgb(102, 102, 102);
    background: #fbfbfb;
}

/* スマホ向けレスポンシブ対応 */
@media screen and (max-width: 700px) {
    .confirm_box_container .confirm_box {
        width: 90%;
    }

    .confirm_box_container .confirm_button_container .confirm_button,
    .confirm_box_container .confirm_button_container .cancel_button {
        max-width: 45%;
    }
}

解説

.confirm_box_container：画面全体にかぶさる半透明の黒背景（モーダル用）

.confirm_box：中央に表示される白背景のボックス

.confirm_button と .cancel_button：操作ボタン。レスポンシブにも対応

モバイル端末ではボタンが画面幅にフィットするように調整しています。

使用例（呼び出し方）

以下のようにして、オリジナルの確認ボックスを呼び出せます。

$('#delete_button').on('click', function () {
    confirm_box('削除確認', '本当に削除しますか？', function () {
        // 削除処理をここに書く
        alert('削除しました');
    });
});

ここでは jQuery でボタンにクリックイベントを登録し、confirm_box 関数を呼び出しています。