@meteora-digital/modal

An es6 class to create some basic modals.

Usage no npm install needed!

<script type="module">
  import meteoraDigitalModal from 'https://cdn.skypack.dev/@meteora-digital/modal';
</script>

README

Modal

Modal is a dependancy free class which can be used to create some basic modals easily.

Installation

yarn add @meteora-digital/modal

HTML Usage

import Modal from '@meteora-digital/modal';

const popup = new Modal;
const content = document.querySelector('.content');

Options

Option Type Description
className string (default: 'modal') If you want more than one style of modal, you can change this class to suit your needs

Content Loading

Fill your modal with something interesting!

The append method can take either a string, an html element, or an array of both!

popup.append(['<h1>Modal Heading</h1>', content]);

Empty the modal

Dont like your modal's content? Delete it!

The empty method simply removes the content from the modal.

popup.empty();

Opening the modal

It would help if we could see it right?

popup.open();

Closing the modal

Get it out the way!

popup.close();

Event Listeners

What if I need something to happen after it opens or closes?

popup.on('open', () => console.log('Your modal has been opened!'));
Events
open
close
append
empty

License

MIT