This package provide a simple JS modal.

Install

To install package, run npm install @vkgp/modal.

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 '@vkgp/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);

JS (YouTube video)

const button = document.querySelector('#video-button');
const videoID = button.getAttribute('data-video-id');

const modal = new Modal({
  transition: '300ms',
  closeButton: true,
  closeOverlay: true
});

modal.addOpenButton(button as HTMLModalElement);
modal.addYoutubeVideo({ videoID: videoID });
modal.addCloseHook(() => modal.YTPlayer.stopVideo());
modal.insert();

CSS

Import default CSS stylesheet

@import '~@vkgp/modal/modal';

Available modal options

declare type modalOptions = {
  closeButton?: HTMLElement;
  closeOverlay?: boolean;
  transition?: string;
}

Public properties

class {
  /**
   * Main div container, also the modal overlay
   */
  public parent: HTMLModalElement;

  /**
   * The modal box
   */
  public modal: HTMLModalElement;

  /**
   * Array of functions called on modal close
   */
  public closeHooks: Function[];


  /**
   * Array of functions called on modal open
   */
  public openHooks: Function[];


  /**
   * The youtube player (only with addYoutubeVideo() method)
   * @see https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls
   */
  public YTPlayer: any;
}

Namespaces

/**
 * Array of functions which called by youtube embed API (onYouTubeIframeAPIReady)
 */
window.YTAPIHooks: Function[];

Basic methods

class {
  /**
   * Close modal
   */
  public open(e?: MouseEvent): void;
  /**
   * Close modal
   */
  public close(e?: MouseEvent): void;
  /**
   * Add close hook
   */
  public addCloseHook(hook: Function): void;
  /**
   * Add open hook
   */
  public addOpenHook(hook: Function): void;
  /**
   * Insert modal in DOM
   */
  public insert(): void;
  /**
   * Destroying modal (remove from DOM)
   */
  public destroy(): void;
  /**
   * Set open event on custom element
   * @param element HTML DOM element which trigger open event
   */
  public addOpenButton(element: HTMLModalElement): void;
  /**
   * Set close event on custom element
   * @param element HTML DOM element which trigger close event
   */
  public addCloseButton(element: HTMLModalElement): void;
  /**
   * Set class to parent element (overlay)
   * @param classes class array to add
   */
  public addParentClass(...classes: string[]): void;
  /**
   * Set class to modal element (overlay)
   * @param classes class array to add
   */
  public addModalClass(...classes: string[]): void;
  /**
   * Append child on modal element
   * @param child DOM element to append
   */
  public addChild(child: HTMLElement): void;
  /**
   * Insert html in element, create and append child in modal
   * @param html inner html to add
   */
  public addHTML(html: string): void;
  /**
   * Create a Youtube video player with options in parameters
   * @param options your options values
   */
  public addYoutubeVideo(options: youtubeOptions): void;
}