ミニマルなモーダルライブラリをnpmで公開しました

1 min読了の目安(約1600字TECH技術記事

ミニマルなモーダルライブラリ(MinimalModal.js)を自作してみたので紹介します。

MinimalModal.jsとは 🤔

TypeScriptで作成された、軽量かつ最小限の機能のモーダルライブラリです。

なんでこのライブラリ作ったの? 🤔

Micromodal.jsを使おうと思ったのですが、
背景スクロール無効がなかったり、IE未対応といったところが私の用途には合わなかったため、
いっそのこと作ってしまったほうが早いかなと考え、作ってみました。

機能 😋

  • モーダル用エレメントのopen属性有無の切り替え<br>(開閉のアニメーションはCSSで実装)
  • 背景をクリックでモーダルを閉じる。<br>(HTMLの実装次第で背景クリックでも閉じないようにできる)
  • タブキーのフォーカス移動でモーダル外に出ることが出来ないように制御<br>(focus-trapに依存)
  • モーダル表示時に背景のスクロールを無効化<br>(body-scroll-lockに依存)
  • IE11 をサポート

導入方法 🚀

npm経由

Console
% npm install @ohnaka0410/minimal-modal --save
// Common.JS
const MinimalModal = require('@ohnaka0410/minimal-modal');
 
// ESModules
import MinimalModal from '@ohnaka0410/minimal-modal';

CDN経由

<script src="https://cdn.jsdelivr.net/npm/@ohnaka0410/minimal-modal@v0.0.7/dist/minimal-modal.min.js"></script>

直接ダウンロード

Console
% curl -o https://cdn.jsdelivr.net/npm/@ohnaka0410/minimal-modal@v0.0.7/dist/minimal-modal.min.js

使い方 :page_facing_up:

自動

MinimalModal.activate();

Demo

手動

// open
const modal = document.querySelector('#someModal');
MinimalModal.show(modal);
 
// close
MinimalModal.close();

Demo

ライセンス 🔒

MIT

npm

@ohnaka0410/minimal-modal

Github

ohnaka0410/minimal-modal

まとめ

自分でモーダルを実装する際にソッと使ってってみようと思います。