1.0.1 • Published 4 years ago
legit-popper v1.0.1
Legit Popper
Popup script with different configurations. Show your content at strategic times and sequences.
Install
Run npm install legit-popper
To Use
Simply run new LegitPopper({...config}).init()
Configuration
Legit Popper takes a configuration object with customizations for your popup. Here is the full configuration object in detail:
{
content: // content you want displayed,
showWhen: // % of screen user has scrolled in order for the popper to appear; default: 0 (shows immediately),
timeUntil: // how long popper should be show on the screen before disappearing (in ms); default: shown indefinitely/doesn't disappear without user input,
onlyOnce: // whether or not popper should be shown only once for a user; default: false,
closeButton: // show close button; default: true,
closeButtonPosition: // position of close button; default: "right",
position: // potition of the popper (i.e. "br", "bl", "tr", "tl"); default: "br" (bottom right),
bgColor: // popper background color; default: "#fff",
textColor: // text color; default: "#444",
borderWidth: // popper border width; default: 1,
borderColor: // popper border color; default: "#d6d6d6",
borderRadius: // popper border radius; default: 3,
boxShadow: // show box shadow around popper; default: true,
width: // width of popper window in % of horizontal screen; default: 0,
fullWidth: // full width of popper window (same as 100% of width); default: false,
padding: // popper padding (in px); default: 20,
};
Customize any or all the values, pass it into the popper function and you're good to go.
TODO
Remove jQuery as a dependency (fadeIn and fadeOut functions).