Note: This is no longer maintained.
CoverPop is modal splash page plugin that is easily styleable.
If you are trying to show up a lightbox popup similar first time visitors that is easily styleable and has cookie integration, this is for you.
If you are trying to show a colorbox image when someone clicks on an internal link, this isn't for you.
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 we could use it exactly how we wanted and didn't get in the way.
Please add an issue instead of sending me an email. It makes it easier to keep track and allows other people to participate in the discussion.
Include the plugin css file:
<linkrel="stylesheet" href="css/CoverPop.css">CoverPop does not use jQuery.
Include the CoverPop.js file at the bottom of your markup.
<scriptsrc="js/CoverPop.js"></script>Start it with the default settings:
CoverPop.start();CoverPop can be customized:
CoverPop.start({coverId: 'CoverPop-cover',// set default cover idexpires: 30,// duration (in days) before it pops up againcloseClassNoDefault: 'CoverPop-close',// close if someone clicks an element with this class and prevent default actioncloseClassDefault: 'CoverPop-close-go',// close if someone clicks an element with this class and continue default actionopenClassDefault: 'CoverPop-open',// set class name added to HTML element when CoverPop is openedcookieName: '_CoverPop',// to change the plugin cookie nameonPopUpOpen: function(){},// on popup open callback functiononPopUpClose: function(){},// on popup close callback functionforceHash: 'splash',// hash to append to url to force display of popup (e.g. http://yourdomain.com/#splash)delayHash: 'go',// hash to append to url to delay popup for 1 day (e.g. http://yourdomain.com/#go)closeOnEscape: true// close if the user clicks escapedelay: 0// set an optional delay (in milliseconds) before showing the popuphideAfter: null// set an optional time (in milliseconds) to autohide});#CoverPop-cover is used on the full window cover.
By default, a click on any element with .CoverPop-close will close the popup. The plugin uses preventDefault with 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 --><divid="CoverPop-cover" class="splash"><divclass="CoverPop-content splash-center"><!-- the popup content (form, welcome message, etc.) --><aclass="CoverPop-close" href="#">or skip signup</a></div><!--end .splash-center --></div><!--end .splash --><!-- end popup --><!-- js, etc. --></body>Example use: You changed the popup, and want all new visitors to see the new one.
CoverPop.start({cookieName: 'CoverPop-new'});if(formIsValid()){CoverPop.close();}Example use: You'd prefer to have the popup not show immediately, and instead wait 4 seconds.
CoverPop.init({delay: 4000});Example use: You want the popup to hide after a set amount of time if it's still open.
CoverPop.init{(hideAfter: 1000*30)};Example use: You are sending visitors to a page that already has a signup form, and don't want them to see the popup.
http://www.example.com/#goExample use: You are sending visitors to a page and want visitors who have already been to the site to see the popup again.
http://www.example.com/#splashExample use: You want visitors to see the popup every 7 days, instead of 30.
CoverPop.start({expires: 7});Example use: You want to start a video after the popup is closed.
CoverPop.start({onPopUpClose: function(){varplayer=document.getElementById('myVideo');player.play();}});Example use: You want to close the popup and set the cookie when a visitor clicks submit on a form in the popup.
<inputtype="submit" value="Submit" class="CoverPop-close-go">MIT