Modalblanc

Simple Modalbox

View on Github

Getting started

Add script to head or to bottom of body.

<script src="modalblanc.js"></script>

Add stylesheet to head

<link rel="stylesheet" href="modalblanc.css">

Install via NPM

npm install modalblanc --save

Set content

const modal = new Modalblanc({
    content: "<h1>Simple modal with data!</h1>"
});

Modal 

var modal = new Modalblanc({
    content: "<h1>Content data man!</h1>",
    sideTwo: {
        content: "<h2>Hello universe!</h2>"
    }
});

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: '<h1>Content data man!</h1>',
    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