chorkaichan/minimal-modal

MinimalModal.js

Minimal and Tiny Javascript Library for Modal Dialog

The aim of this library is to easily introduce a minimalistic modal dialog. It is a library of only about 18KB.

Features

✔ Toggles aria-hidden attributes & open attributes on open and close

✔ Closes dialog on overlay click or ESC press

✔ Traps tab focus within the modal (Dependent on focus-trap)

✔ Lock the scrolling outside the modal (Dependent on body-scroll-lock)

✔ Make By Typescript

✔ Supported for IE11+

Install

via npm

npm install @yuki0410/minimal-modal --save

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

// ESModules
import MinimalModal from '@yuki0410/minimal-modal';

via CDN direct link

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

direct download

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

<script src="/path/to/minimal-modal.min.js"></script>

Automatic Usage

<!-- show trigger -->
<button data-modal-show="#modal-1">

<!-- close trigger -->
<button data-modal-close>

// activate
MinimalModal.activate();

// deactivate
MinimalModal.deactivate();

demo

MinimalModal.activate();

Active Show / Close Modal Triggers.

MinimalModal.deactivate();

Deactive Show / Close Modal Triggers.

Manual Usage

const modal = document.querySelector('#someModal');

// open
MinimalModal.show(modal);

// close
MinimalModal.close();

// closeAll
MinimalModal.closeAll();

demo

MinimalModal.show(element[, modalOptions]);

Show Modal.

element: HTMLElement

modalOptions

focusTrap { FocusTrapOptions? }: See FocusTrap Options.
bodyScrollLock { BodyScrollOptions? }: See BodyScrollLock Options.

MinimalModal.close();

Close Active Modal.

MinimalModal.closeAll();

Close All Models.

Changelog

Refer to the releases page.

Contribution

Fork the repository on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Licence

This project is licensed under MIT license.

Created and maintained by

@yuki0410_ 🇯🇵

chorkaichan / minimal-modal