CoverPop.js is a lightweight lightbox’y modal plugin with cookie integration. Style agnostic and responsive friendly.
Usage
If you are trying to show up a lightbox popup to first time visitors that is easily styleable and has cookie integration, this is for you.
If you are trying to show a lightbox image when someone clicks on an internal link, this isn’t for you.
Background
CoverPop is an extension of code that we frequently found ourselves using on political campaign websites for email signups with first time visitors. We needed something that was customizable to the point that we could use it how we wanted without it getting in the way.
Setup
HTML
#CoverPop-cover is used on the full window cover.
By default, a click on any element with .CoverPop-close will close the popup. CoverPop adds preventDefault()to elements with this class.
If you wish to continue with the default action, but also hide the popup, add .CoverPop-close-go. This is particularly useful for form submissions that are sent to another page.
| 12345678910111213141516171819 |
<body>
<!– your site’s markup –>
<!– start popup –>
<div id=“CoverPop-cover“ class=“splash“>
<div class=“CoverPop-content splash-center“>
<!– the popup content (form, welcome message, etc.) –>
<a class=“CoverPop-close“ href=“#“>or skip signup</a>
</div><!–end .splash-center –>
</div><!–end .splash –>
<!– end popup –>
<!– js, etc. –>
</body>
|
CSS
Include the plugin css file:
| 1 |
<link rel=“stylesheet“ href=“css/CoverPop.css“>
|
JS
CoverPop does not use jQuery, so the only file that needs to be included is CoverPop.js.
Start CoverPop with the default settings:
| 1 |
CoverPop.start();
|
Options
CoverPop can be customized in numerous ways. Just pass an object to the start function with what you want to change. The start function is an alias for init.
| NAME | DEFAULT | DETAILS | TYPE |
|---|---|---|---|
| coverId | “CoverPop-cover” | set default cover (background) id | string |
| expires | 30 | duration (in days) before it pops up again | integer |
| closeClassNoDefault | “CoverPop-close” | close if someone clicks an element with this class and prevent default action | string |
| closeClassDefault | “CoverPop-close-go” | close if someone clicks an element with this class and continue default action | string |
| cookieName | “CoverPop” | to change the plugin cookie name | string |
| onPopUpOpen | function() {} | on popup open / default is nothing | function |
| onPopUpClose | function() {} | on popup close / default is nothing | function |
| forceHash | “splash” | hash to append to url to force display of popup | string |
| delayHash | “go” | hash to append to url to delay popup for 1 day | string |
| closeOnEscape | true | close if the user clicks escape | boolean |
| debug | false | toggle console.log statements for debugging | boolean |
Examples
Use a new cookie
Example use: You changed the popup, and want all new visitors to see the new one.
Hide popup to the visitor for a day
Example use: You are sending visitors to a page that already has a signup form, and don’t want them to see the popup.
| 1 |
http://www.example.com/#go
|
Force popup
Example use: You are sending visitors to a page and want visitors who have already been to the site to see the popup again.
| 1 |
http://www.example.com/#splash
|
Change time before cookie expires
Example use: You want visitors to see the popup every 7 days, instead of 30.
| 123 |
CoverPop.start({
expires: 7
});
|
Do something after the popup closes
Example use: You want to start a video after the popup is closed.
| 123456 |
CoverPop.start({
onPopUpClose: function() {
var player = document.getElementById(‘myVideo‘);
player.play();
}
});
|
Hide the popup when someone clicks submit on a form and continue
Example use: You want to close the popup and set the cookie when a visitor clicks submit on a form in the popup.
| 1 |
<input type=“submit“ value=“Submit“ class=“CoverPop-close-go“>
|
Browsers
IE8+
Source
License
MIT.