@meteora-digital/modal

0.1.0 • Public • Published

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

Package Sidebar

Install

npm i @meteora-digital/modal

Weekly Downloads

20

Version

0.1.0

License

MIT

Unpacked Size

10 kB

Total Files

5

Last publish

Collaborators

  • meteora-digital