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

【更新履歴】
2020/10/28 v1.0.0の機能について追記。デモをGithub Pagesに移動。

---

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

MinimalModal.jsとは

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

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

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

機能

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

導入方法

npm経由

Console

% npm install @yuki0410/minimal-modal --save

// Common.JS
const MinimalModal = require('@yuki0410/minimal-modal');
 
// ESModules
import MinimalModal from '@yuki0410/minimal-modal';

CDN経由

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

直接ダウンロード

Console

% curl -o https://cdn.jsdelivr.net/npm/@yuki0410/minimal-modal/dist/minimal-modal.min.js

使い方

自動

MinimalModal.activate();

　→　デモ

手動

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

　→　デモ

ライセンス

MIT

npm

@yuki0410/minimal-modal

Github

ohnaka0410/minimal-modal

まとめ

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