📕

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

commits1 min read 4

ミニマルなモーダルライブラリ(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

まとめ

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

GitHubで編集を提案

Discussion

デモを見たら、モーダルを開いた際に✖️ボタンにフォーカスが
セットされている?せいで、✖️ボタンのボタンの形がくっきりと
浮き出て表示されていて、少しダサく感じました。
実装を見直して?モーダルを開いた際にcloseボタン?に必ず
フォーカスがセットされる?ようにしたほうがよい気がします。

手動のデモで、モーダル内のボタン以外の文字列をクリックしても、
モーダルが閉じました。。。

@asip2k25
興味もっていただきありがとうございます!

手動のデモで、モーダル内のボタン以外の文字列をクリックしても、
モーダルが閉じました。。。

失礼しました。こちらはdemoのコードのバグだったため修正しました。

デモを見たら、モーダルを開いた際に✖️ボタンにフォーカスが
セットされている?せいで、✖️ボタンのボタンの形がくっきりと
浮き出て表示されていて、少しダサく感じました。
実装を見直して?モーダルを開いた際にcloseボタン?に必ず
フォーカスがセットされる?ようにしたほうがよい気がします。

基本フォーカスは上から順番に当たっていくのが直感的かなと思い現在の実装にしております。
(その辺りはfocus-trapに処理を丸投げしていますが、利用者側でtabIndex属性での制御や、手動の表示処理後にJSで任意の場所にフォーカスしていただければ実現可能かとは思います。)
また、demoなのでstyleは最低限しか適用していないため、見た目がイケてないのはしょうがないと思っています。

モーダルを開いた直後に、最初にフォーカスを当てる要素をCSSセレクタetcで
指定できるオプションを追加しては如何でしょうか?

ログインするとコメントできます