Skip to content
A simple Vanilla JavaScript plugin that launches a modal box where place your message
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
README.md
index.html
index2.html
index3.html
index4.html

README.md

pop-it

Pop-it. A(nother) simple Vanilla JavaScript plugin that launch a pop up box where place your message. No jQuery is needed. No pretentions, just for fun.

Demo

Demo 1 | Demo 2 | Demo 3 | Demo 4

Usage

• Download or fork the repository.

• Include the CSS & Javascript file minify or not in your HTML.

• Place your message in the DOM's .u-modal container using its structure. (See the different demos where you could find a simple or double column structure.

• Initialize your modal box.

var modal = new Popit();

• Remember you can customize some features

var modal = new Popit({
        auto: false, 
        veil: "disabled"
    });

Options

auto true/false launches the modal box automatically
veil "active"/"disabled" makes the outer veil available to attach an event to close de modal box

• Transitions are made with CSS

• CSS BEM convetion classes

• CSS classes are namespaced under u- prefix in order to avoid strange behaviours with your own CSS

Final thoughts

Please, take this Demo as it is, and feel free to download, modify, break, use or destroy this code.

You can’t perform that action at this time.