Modal is a dependancy free class which can be used to create some basic modals easily.
yarn add @meteora-digital/modal
import Modal from '@meteora-digital/modal';
const popup = new Modal;
const content = document.querySelector('.content');
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 |
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]);
Dont like your modal's content? Delete it!
The empty method simply removes the content from the modal.
popup.empty();
It would help if we could see it right?
popup.open();
Get it out the way!
popup.close();
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 |