Categories
cookies js

coverpopjs.com

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.

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>
view rawCoverPop.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 rawCoverPop.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.

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

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

CoverPop is modal splash page plugin that is easily styleable — Read More

Latest commit to the master branch on 12-21-2014

Download as zip

VIEW ON GITHUB

License

MIT.

AN NMC PROJECT.

Leave a Reply