1.0.7 • Published 2 years ago
@lorndev/modal v1.0.7
This package provide a simple JS modal.
Install
To install package, run npm install @lorndev/modal
.
Usage
Example
JS Create a modal which display a simple 'Hello word'. Note: Your document body element need to be accessible: DOMContentLoaded before modal.insert() method.
import { Modal } from '@lorndev/modal/modal';
// Create your modal content HTML element
const paraph = document.createElement('p');
paraph.textContent = 'Hello world';
// Create modal instance
const modal = new Modal({
// Your options here
closeOverlay: true
});
modal.addChild(paraph);
modal.insert();
// Your open modal button
const button = document.querySelector('.my-button');
modal.addOpenButton(button);
CSS Import default CSS stylesheet
@import '~@lorndev/modal/modal';
Available options
declare type modalOptions = {
closeButton?: HTMLElement;
closeOverlay?: boolean;
transition?: string;
}
Basic methods
/**
* Close modal
*/
open(e?: MouseEvent): void;
/**
* Close modal
*/
close(e?: MouseEvent): void;
/**
* Insert modal in DOM
*/
insert(): void;
/**
* Destroying modal (remove from DOM)
*/
destroy(): void;
/**
* Set open event on custom element
* @param element HTML DOM element which trigger open event
*/
addOpenButton(element: HTMLModalElement): void;
/**
* Set close event on custom element
* @param element HTML DOM element which trigger close event
*/
addCloseButton(element: HTMLModalElement): void;
/**
* Set class to parent element (overlay)
* @param classes class array to add
*/
addParentClass(...classes: string[]): void;
/**
* Set class to modal element (overlay)
* @param classes class array to add
*/
addModalClass(...classes: string[]): void;
/**
* Append child on modal element
* @param child DOM element to append
*/
addChild(child: HTMLElement): void;
/**
* Insert html in element, create and append child in modal
* @param html inner html to add
*/
addHTML(html: string): void;
/**
* Create a Youtube video player with options in parameters
* @param options your options values
*/
addYoutubeVideo(options: youtubeOptions): void;