@frontle/modal v1.0.1

@frontle/modal

Modal UI

Usage

import { Modal } from "../../browser_modules/@frontle/modal/index.js";

const modal = new Modal("#app", "<button id='closeButton'>close</button>");
modal.beforeOpen = (modalId) => {
  document.querySelector("#closeButton").onclick = () => {
    modal.close(modalId);
  };
};
modal.open();

Install

Frontle

frontle install @frontle/modal --noBuild

Download files

https://github.com/Frontle-Foundation/Modal

API

new Modal(parents, html)

Create a modal object

const modal = new Modal("#app", "<button id='closeButton'>close</button>");

.modalClass

.contentsClass

.backgroundClass

Set the css class of a modal

modal.modalClass = 'cssClassName';
modal.contentsClass = 'cssClassName1 cssClassName2';
modal.backgroundClass = '';

.transitionSeconds

Set the modal animation time

modal.transitionSeconds = 0.3;

.backgroundClickExit

Set whether modal can be closed by clicking on modal background

modal.backgroundClickExit = true;

.beforeOpen

This lifecycle is executed before the modal is opened

modal.beforeOpen = (modalID) => { console.log('before opened') }

.afterOpen

This lifecycle is executed after the modal is opened

modal.afterOpen = (modalID) => { console.log('after opened') }

.beforeEnd

This lifecycle is executed before the modal closes

modal.beforeEnd = (modalID) => { console.log('before closed') }

.afterEnd

This lifecycle is executed after the modal is closed

modal.afterEnd = (modalID) => { console.log('after closed') }

.open()

Open modal

const modalID = await modal.open();

.close(modalID)

Close modal

await modal.close(modalID);

People

The original author of @frontle/modal is MushStory

License

MIT