Modal can render full page modals, with or without greyed out overlays, and modals that center in a div or other container as well.

Example Usage

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const modal = new UI.Modal('body', 'This is a test modal',
  {
    fullscreenModal: true,
    hideOnOverlayClick: true,
    showOverlay: true
  });

// Render the DOM for the Modal component
modal.render();

// Show the modal
modal.show();

// Hide the modal
modal.hide();

params

NameTypeDefaultDescription
elstringundefinedA string of the selector for the element to put the component in
contentstringundefinedA string of html to put in the modal content
optsobject{}A catch all for various options. See the opts table below for options specific to this component.

opts

NameTypeDefaultDescription
closeButtonstring'X'An HTML string to display the close icon
fullscreenModalbooleantrueA boolean indicating if the modal should be 100vw and 100vh or fill its container
hideOnOverlayClickbooleanfalseA boolean indicating if clicking the overlay should close the modal
showOverlaybooleanfalseA boolean to show the grey overlay or not