https://hhelibex.hatenablog.jp/entry/2025/10/25/204833

はじめに

ちょっとお仕事で必要が生じて、window.confirm()ではまかない切れないカスタムダイアログを出さなければならなくなったので、その検証メモ。

今回は、Laravelを使って組んでいく。

なお、実行環境は以下だが、構築の詳細は割愛。

VirtualBox 7.1.0
AlmaLinux 9.4
PHP 8.3.22

下準備

まずはLaravelのプロジェクトを作る。

cd /var/www/html
composer create-project laravel/laravel:11.* sample10
chmod -R a+w  sample10/storage/
chmod a+w  sample10/bootstrap/cache

お仕事がLaravel 11なので、バージョンとしてLaravel 11系を指定しているが、最新のLaravel 12系でも問題なく動くと思う。

ファイルの作成・編集

今回は、ラジオボタン2つでの選択肢があり、OK、キャンセルの2つのボタンがあるダイアログを作る。

sample10/resources/views/sample/index.blade.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <base href="/sample10/public/" />
    <meta charset="UTF-8" />
    <title>カスタムダイアログ</title>
    <link rel="stylesheet" type="text/css" href="sample.css" />
    <script type="text/javascript" src="sample.js"></script>
</head>

<body>
    <button id="openDialogButton">確認ダイアログを開く</button>

    <dialog id="customDialog">
        <h2>削除しますか？</h2>
        <p>選択したアイテムを、このカテゴリからのみ削除しますか？</p>
        <p>または、データベースから完全に削除しますか？</p>
        <ul>
            <li>
                <label>
                    <input id="removeFromCategory"
                        type="radio" name="deleteMode" value="1" />
                    このカテゴリから削除
                </label>
            </li>
            <li>
                <label>
                    <input id="deleteFromDatabase"
                        type="radio" name="deleteMode" value="1" />
                    データベースから完全に削除
                </label>
            </li>
        </ul>
        <div class="dialog-buttons">
            <button id="yesButton">はい</button>
            <button id="cancelButton">キャンセル</button>
        </div>
    </dialog>

    <script type="text/javascript">
        initDialog();
    </script>
</body>

</html>

sample10/public/sample.css

dialog {
    padding: 2em;
    border: solid 1px #ccc;
    border-radius: 8px;
    max-width: 400px;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.dialog-buttons {
    margin-top: 1.5em;
    display: flex;
    justify-content: flex-end;
    gap: 1em;
}

sample10/public/sample.js

function initDialog() {
    const openDialogButton = document.getElementById("openDialogButton");
    const customDialog = document.getElementById("customDialog");
    const yesButton = document.getElementById("yesButton");
    const cancelButton = document.getElementById("cancelButton");
    const radioRemoveFromCategory =
        document.getElementById("removeFromCategory");
    const radioDeleteFromDatabase =
        document.getElementById("deleteFromDatabase");

    openDialogButton.addEventListener("click", () => {
        // 前回の選択結果が残るので、ラジオボタンの選択状態を毎回初期化
        radioRemoveFromCategory.checked = true;
        customDialog.showModal(); // モーダルダイアログとして表示
    });

    yesButton.addEventListener("click", () => {
        let modeText;
        if (radioRemoveFromCategory.checked) {
            modeText = "カテゴリからのみ削除";
        } else if (radioDeleteFromDatabase.checked) {
            modeText = "データベースから完全に削除";
        } else {
            modeText = "N/A";
        }
        // 「はい」が選択されたときの処理
        alert("「はい」が選択されました。（" + modeText + "）");
        customDialog.close();
    });

    cancelButton.addEventListener("click", () => {
        // 「キャンセル」が選択されたときの処理
        alert("「キャンセル」が選択されました。");
        customDialog.close();
    });
}

sample10/routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/sample', function () {
    return view('sample.index');
});

動作確認

以下のURLにアクセスして動作確認。

http://<your-ip-address>/sample10/public/sample

ラジオボタン「このカテゴリから削除」を選んで「はい」ボタンを押すと、「「はい」が選択されました。（カテゴリからのみ削除）」が表示される
ラジオボタン「データベースから完全に削除」を選んで「はい」ボタンを押すと、「「はい」が選択されました。（データベースから完全に削除）」が表示される
ラジオボタンは任意の選択状態で「キャンセル」ボタンを押すと、「「キャンセル」が選択されました。」が表示される

辺りが確認できれば完成。

参考

Geminiを頼った。

share.google