【micromodal.js】モーダルウィンドウのライブラリの使い方

環境

今回の開発環境は以下の通りです。
Laravel9
Inertia
Vue3

micromoal.jsとは

シンプルなモーダルウィンドウを簡単に作れるライブラリです。

公式

インストール

npm i micromodal@0.4.10 --save

コマンド実行後、json:package.jsonにmicromodalが追加されていれば、無事にインストールされています。

package.json

"dependencies": {
    "micromodal": "^0.4.10",
}

準備

micromodal.js

resources/js/micromodal.jsを新たに作成します。

micromodal.js

import MicroModal from 'micromodal'

// MicroModal.init()で初期化
MicroModal.init({
    // オプション
    
    // 背景をスクロールさせない
    disableScroll: true
});

micromodal.css

resources/css/micromodal.cssを作成し、下記のページからコードをコピー

※公式マニュアルにこのコードが書かれているGitHubへのリンクがあります。

app.js

resources/js/app.jsでこれまでに作成したファイルをインポートし、使えるようにします。

app.js

import './micromodal';
import '../css/micromodal.css';

components

コンポーネントを作っていきます。

resources/Components/MicroModal.vueを作ります。

MicroModal.vue

<script setup>
import { ref } from 'vue'

// boolean型の変数 初期値がfalse
// クリックしたらtrueに変わる
const isShow = ref(false)
const toggleStatus = () => { isShow.value = !isShow.value}
</script>

<template>
<div v-show="isShow" class="modal" id="modal-1" aria-hidden="true">
        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
            <header class="modal__header">
                <h2 class="modal__title" id="modal-1-title">
                Micromodal
                </h2>
                <button @click="toggleStatus" type="button" class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            </header>
            <main class="modal__content" id="modal-1-content">
                <p>
                Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
                </p>
            </main>
            <footer class="modal__footer">
                <button @click="toggleStatus" type="button" class="modal__btn modal__btn-primary">Continue</button>
                <button @click="toggleStatus" type="button" class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
            </footer>
            </div>
        </div>
    </div>

    <button @click="toggleStatus" type="button" data-micromodal-trigger="modal-1" href='javascript:;'>Open Modal Dialog</button>
</template>

使いたいファイルに記述

使いたいファイルでコンポーネントを呼び出せば使えるようになります。

Index.vue

import MicroModal from '@/Components/MicroModal.vue'

<MicroModal />