Modalblanc

Simple Modalbox

View on Github

Getting started

Add script to head or to bottom of body.


Add stylesheet to head


Install via NPM

npm install modalblanc --save

Set content

const modal = new Modalblanc({
    content: "

Simple modal with data!

" });

Modal

var modal = new Modalblanc({
    content: "

Content data man!

", sideTwo: { content: "

Hello universe!

" } });

Modal with second side

const photos = [
    'img/example-images-1.jpg',
    'img/example-images-2.jpg',
    'img/example-images-3.jpg',
    'img/example-images-4.jpg'
];

const modalSlider = new Modalblanc({
    content: '

Content data man!

', slider: photos, autoPlaySlider: true });

Modal as a slider

Options

Option Default Type Description
content null string Content in the modal
animation fade-in-out string Type of modal animation (fade-in-out, slide-in-right)
closeButton true boolean Show or hide the close button
sideTwo: content null string Displays your content on the backside of the modal
sideTwo: animation slide string Type of modal content animation (slide, scale)
sideTwo: button null object Custom elements (a, button, li e.g.) id always have to be modal-button-next and parent always front-card. Fix this on short term.
sideTwo: button back null object Custom elements (a, button, li e.g.) id always have to be modal-button-prev and parent always back-card. Fix this on short term.
slider optional array Enable photo slider
autoPlaySlider false boolean Auto play photo slider when is active