js – Rawi Rai

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.

VIEW DEMO

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.

<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>

view raw CoverPop-html.html hosted with ❤ by GitHub

CSS

Include the plugin css file:

1	<link rel=“stylesheet“ href=“css/CoverPop.css“>

view raw CoverPop.html hosted with ❤ by GitHub

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();

view raw CoverPop.js hosted with ❤ by GitHub

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.

CoverPop.start({
cookieName: ‘CoverPop-new‘
});

view raw CoverPop-newcookie.js hosted with ❤ by GitHub

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

view raw CoverPop-delay.txt hosted with ❤ by GitHub

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

view raw CoverPop-force.txt hosted with ❤ by GitHub

Change time before cookie expires

Example use: You want visitors to see the popup every 7 days, instead of 30.

CoverPop.start({
expires: 7
});

view raw CoverPop-expire.js hosted with ❤ by GitHub

Do something after the popup closes

Example use: You want to start a video after the popup is closed.

CoverPop.start({
onPopUpClose: function() {
var player = document.getElementById(‘myVideo‘);
player.play();
}
});

view raw CoverPop-callback.js hosted with ❤ by GitHub

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“>

view raw CoverPop-close.html hosted with ❤ by GitHub

Browsers

IE8+

Source

VIEW ON GITHUB

License

MIT.