0.1.0 • Published 2 months ago
@meteora-digital/modal v0.1.0
Modal
Modal is a dependancy free class which can be used to create some basic modals easily.
Installation
yarn add @meteora-digital/modalHTML 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 |