JavaScriptでLaravelアプリに削除確認モーダルを実装する

はじめに

Laravel学習の一環でBreezeを利用した簡単な記事投稿アプリを作成しました。
その際、投稿削除時に確認モーダルを表示する機能をJavaScriptで実装してみたので、備忘のため記事に残します。

完成イメージ

実装フロー

1. HTMLでモーダル本体と暗転用の要素を作成
2. CSSでモーダルと暗転効果のスタイルを定義
3. JavaScriptでモーダル表示等のイベントリスナーを設定

1. HTMLでモーダル本体と暗転用の要素を作成

削除ボタンと同じビューファイルに記述します。

モーダル本体

<div id="js-delete-modal" class="hidden top-60 left-1/2 -translate-x-1/2 bg-white rounded-2xl fixed z-10">
    <div class="p-4">
        <p class="pb-4">本当に削除してよろしいですか？</p>
        <div class="text-right flex">
            <form method="post" action="{{ route('post.destroy', $post) }}" class="flex-1">
                @csrf
                @method('delete')
                <x-primary-button class="bg-red-700 ml-2">
                    はい
                </x-primary-button>
            </form>
            <x-primary-button id="js-cancel-button" class="ml-2">
                キャンセル
            </x-primary-button>
        </div>
    </div>
</div>

暗転用

<div id="js-overlay" class="hidden top-0 left-0 w-full h-full bg-black/60 fixed z-9"></div>

2. CSSでモーダルと暗転効果のスタイルを定義

1で作成したモーダル本体と暗転用の要素にdisplay: none;を設定して非表示にします。
今回はTailwind CSSを使用しているのでhiddenクラスを設定しておきます。

3. JavaScriptでモーダル表示等のイベントリスナーを設定

削除ボタンをクリックした時にモーダルを表示し、モーダル内のキャンセルボタンや暗転部分をクリックした時にモーダルを消すようにします。

モーダル表示用

document.getElementById('js-delete-button').addEventListener('click', () => {
    document.getElementById('js-delete-modal').classList.remove('hidden');
    document.getElementById('js-overlay').classList.remove('hidden');
});

モーダル非表示用

document.getElementById('js-cancel-button').addEventListener('click', () => {
    document.getElementById('js-delete-modal').classList.add('hidden');
    document.getElementById('js-overlay').classList.add('hidden');
});

document.getElementById('js-overlay').addEventListener('click', () => {
    document.getElementById('js-delete-modal').classList.add('hidden');
    document.getElementById('js-overlay').classList.add('hidden');
});

jsファイルはpublic\jsディレクトリに設置し、ビューファイル内でasset関数を用いて読み込ませています。

<script src="{{ asset('js/modal.js') }}"></script>

おわりに

ベストなやり方ではないと思いますが、自力でやってみたことでLaravelアプリでJavaScriptを活用するイメージがわきました。