Laravel11でmicromodelライブラリを導入する

javascript

2024.05.20

Micromodelの概要
Laravel11での導入方法
完成形

Micromodelの概要

このようなモダンなポップアップを表示できるjsのライブラリーです。

以下は公式サイト。

Micromodal - Tiny javascript library for creating accessible modal dialogs

Micromodal enables you to create accessible modal dialogs with minimal configuration. At just 1.9kb minified and gzipped...

Laravel11での導入方法

インストール

npm install micromodal --save

インポート＆初期設定

resources/js/bootstrap.js　に下記を追記

// インポート
import MicroModal from 'micromodal';

// 初期設定（必要に応じて
MicroModal.init({
  onShow: modal => console.info(`${modal.id} is shown`), // [1]
  onClose: modal => console.info(`${modal.id} is hidden`), // [2]
  openTrigger: 'data-custom-open', // [3]
  closeTrigger: 'data-custom-close', // [4]
  openClass: 'is-open', // [5]
  disableScroll: true, // [6]
  disableFocus: false, // [7]
  awaitOpenAnimation: false, // [8]
  awaitCloseAnimation: false, // [9]
  debugMode: true // [10]
});

cssの設定

resources/css/micromodel.cssファイルを作成し、下記リンクの内容をコピペーして保存

micromodal.css

resources/css/app.css　に作成したmicromodel.cssをimportする

@import 'micromodal';
@tailwind base;
@tailwind components;
@tailwind utilities;

bladeファイルにポップアップのコードをコピペー

micromodal.html　このファイルの内容をコピしてbladeファイルに貼り付ける

適当なところで、ポップアップを立ち上げるためのリンクやボタンを設置

<a href="#" data-micromodal-trigger="modal-1">Trigger modal</a>

完成形

画像のようにTrigger model　をクリックすると、ポップアップが立ち上がればOKです！