@meteora-digital/modal

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
allowClose	boolean (default: true)	If you want to disable the close button, set this to false
removeFromDOM	boolean (default: true)	If you want to keep the modal in the DOM, set this to false

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