Welcome to another tutorial from Zealous
I have pre packaged everything and have it located on my server if anyone needs a copy of the scripts in form.
http://www.zealousdevelopment.com/downl ... opment.rar
live example: http://www.zealousdevelopment.com/Projects/js-popup/
Now This is something i have been looking into for one of my web sites to allow an 18+ check with buttons to accept or denied and be redirected. Which i should have a sample of the JS coded in another recent tutorial.
So lets start off with the basics then, first off i will show the hyperlink attachment when a hyperlink is clicked with the correct reference. It will execute the script and show your box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Link Sample</title>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#link_content').colorbox({opacity:0.3});
});
</script>
</head>
<body>
<p> Link Sample</p>
<p>This is a hyperlink version of the script that will allow a pop up box when clicked</p>
<a href='content.html' id='link_content' >Sample Popup</a>
</body>
</html>
As you can see above by linking the script function colorbox with the ID in the href would execute quite simple.
Next
We have the onload version which is when the page loads it executes the script and shows the pop up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload Sample</title>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
$.colorbox({opacity:0.3, href:"offer.html"});
});
});
</script>
</head>
<body>
<h1> Onload Sample</h1>
<p>This script will show how to use a simple html file to display your content in a JS Pop-up.</p>
<p> </p>
<p>By changing the offer.html file you can change what is displayed</p>
</body>
</html>
Now the pop up uses a single HTML file for the contents inside the box which can be changed easy to suite your needs.
And finally
An altered version of the previous sample but with a delay timer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload With Timer</title>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="css/colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
window.setTimeout(function(){ $.colorbox({opacity:0.3, href:"offer.html"}); }, /*timeout->*/ 2000);
});
});
</script>
</head>
<body>
<h2>Onload with Timer</h2>
<p>If you need to wait for the site to load first before loading then this may help with a few simple changes you can add a timer to the script and set a delay on the load.</p>
</body>
</html>
By following these examples should give you a great idea where to start when adding one to a new site.
Now for the css if you don't want to download the package.
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../images/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(../images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(../images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(../images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(../images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(../images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(../images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(../images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(../images/ie6/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
Thanks for reading my post, hope it helps someone in need.
This page was published on It was last revised on
