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 |