Modal

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

JavaScript

// 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

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
content	string	undefined	A string of html to put in the modal content
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
closeButton	string	'X'	An HTML string to display the close icon
fullscreenModal	boolean	true	A boolean indicating if the modal should be 100vw and 100vh or fill its container
hideOnOverlayClick	boolean	false	A boolean indicating if clicking the overlay should close the modal
showOverlay	boolean	false	A boolean to show the grey overlay or not