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