chorkaichan / minimal-modal Goto Github PK

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.

✔ 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+

npm install @yuki0410/minimal-modal --save

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

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

<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

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

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

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

// activate
MinimalModal.activate();

// deactivate
MinimalModal.deactivate();

demo

Active Show / Close Modal Triggers.

Deactive Show / Close Modal Triggers.

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

// open
MinimalModal.show(modal);

// close
MinimalModal.close();

// closeAll
MinimalModal.closeAll();

demo

Show Modal.

element: HTMLElement

modalOptions

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

Close Active Modal.

Close All Models.

Refer to the releases page.

1. Fork the repository on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. 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!

This project is licensed under MIT license.

@yuki0410_ 🇯🇵