@ohnaka0410/minimal-modaldeprecated

Minimal and Tiny Javascript Library for Modal Dialog

Usage no npm install needed!

<script type="module">
  import ohnaka0410MinimalModal from 'https://cdn.skypack.dev/@ohnaka0410/minimal-modal';
</script>

README

MinimalModal.js

licence npm minified size dependencies downloads

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 @ohnaka0410/minimal-modal --save

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

// ESModules
import { MinimalModal } from '@ohnaka0410/minimal-modal';

via CDN direct link

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

direct download

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

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

 

Usage

automatic

MinimalModal.activate();

demo

manual

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

// close
MinimalModal.close();

demo

 

Changelog

Refer to the releases page.

 

Contribution

  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!

 

Licence

This project is licensed under MIT license.

 

Created and maintained by

@ohnaka0410 🇯🇵