최소한의 모달 라이브러리를 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 경유

콘솔

% 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>

직접 다운로드

콘솔

% 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

요약

스스로 모달을 구현할 때에 사용해 보려고 생각합니다.