Colorbox guide
The page below includes basic documentation for implementing the Colobox jquery plugin. Please reference the Instructions & Help provided by the plug-in's author for additional information.
Adding Colorbox CSS & JS
For production systems, please reference the minified versions:
<link href="//webcontent.alaska.gov/libs/colorbox/1.5.14/colorbox.css" type="text/css" rel="stylesheet" media="screen">
<script src="//webcontent.alaska.gov/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//webcontent.alaska.gov/libs/colorbox/1.5.14/jquery.colorbox.min.js"></script>
These should be added to your page's header (<header>).
Posting an Overlay(aka Click-Through Notice)
An overlay is a pattern that covers the web page and requires user-input to bypass. This should be used with extreme reluctance as is can create accessibility issues and user frustration.
How To:
Add the colorbox box references above to the page's header.
Add a <div> to your page or use an existing <div> with the notice content and give it a unique ID.
Add a script to the bottom of your page before closing body tag (</body>) to make a colorbox from your <div>.
Code Examples:
DIV tag
<div id="alerts">
<h2>This is an example Overlay</h2>
<p>The content in here will be styled like the content on your pages. Except the color will match the border.</p>
</div>
Bottom Script
<script>$.colorbox({inline:true, href:"#alerts", width:"100%", maxWidth:"420px"}); </script>
Code for Cookie:
This will display your message on first visit, and set a cookie that will expire in 3 days. The message will only display again once the cookie has expired:
<script>
if (document.cookie.indexOf('visited=true) === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+3); // defines expiration date as # of days from day user visits site
document.cookie = "visited=true; expires="+expires.toUTCString(); // creates cookie
$.colorbox({inline:true, href:"#alerts", width:"100%", maxWidth:"420px"}); // as above, creates the overlay
}
</script>
Examplel Alert Div:
This is an example Overlay
The content in here will be styled like the content on your pages. Except the color will match the border.
