frontle-modal v2.1.3

Frontle Modal

Modal UI in Frontle

Usage

// at css file
.modalPosition{
    position: absolute;
}
.contentsWidth{
    width: 80%;
}
.contentsHeight{
    height: 200px;
}

// at js file
import frontle_modal from "browser_modules/frontle-modal/module.js";
const Modal = frontle_modal.Modal;

let modal = new Modal('<button id="closeButton">close</button>');
modal.modalClass = 'modalPosition';
modal.modalContentsClass = 'contentsWidth contentsHeight';
modal.modalBackgroundClass = '';
modal.start = () => {
    console.log('modal start!');

    document.getElementById('closeButton').onclick = () => {
        modal.close();
    }
}
modal.open();

Install

Frontle

frontle install frontle-modal

Download files

https://github.com/Artifriends-inc/Frontle-Modal

API

new modal(html)

Create a modal object

let modal = new Modal('<button id="closeButton">close</button>');

.modalClass

.modalContentsClass

.modalBackgroundClass

Set the css class of a modal

modal.modalClass = 'modalPosition';
modal.modalContentsClass = 'contentsWidth contentsHeight';
modal.modalBackgroundClass = '';

.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;

.awake

This lifecycle runs before modal rendering.

modal.awake = () => { console.log('before rendering') }

.start

This lifecycle runs after modal rendered

modal.start = () => { console.log('after rendering') }

.end

This lifecycle runs before modal termination

modal.end = () => { console.log('before termination') }

.sleep

This lifecycle runs after modal termination

modal.sleep = () => { console.log('after termination') }

.open()

Open modal

modal.open();

.close()

Close modal

modal.close();

People

The original author of frontle-modal is MushStory

License

MIT