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;