JS PopUp Colorboxes

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1219
  • Loc: Sydney

Post 3+ Months Ago

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.

Code: [ Select ]
<!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>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Link Sample</title>
  6. <style type="text/css">
  7. body{ font-family:Verdana, Arial, serif; font-size:14px;}
  8. </style>
  9. <link media="screen" rel="stylesheet" href="css/colorbox.css" />
  10. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  11. <script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13.   $(function()
  14.   {
  15.     $('#link_content').colorbox({opacity:0.3});
  16.   });
  17. </script>
  18. </head>
  19. <body>
  20. <p> Link Sample</p>
  21. <p>This is a hyperlink version of the script that will allow a pop up box when clicked</p>
  22. <a href='content.html' id='link_content' >Sample Popup</a>
  23. </body>
  24. </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.

Code: [ Select ]
<!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>&nbsp;</p>
<p>By changing the offer.html file you can change what is displayed</p>

</body>

</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Onload Sample</title>
  6. <style type="text/css">
  7. body{ font-family:Verdana, Arial, serif; font-size:14px;}
  8. </style>
  9. <link media="screen" rel="stylesheet" href="css/colorbox.css" />
  10. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  11. <script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. $(function()
  14. {
  15.   $(window).bind('load',
  16.     function(e)
  17.     {
  18.       $.colorbox({opacity:0.3, href:"offer.html"});
  19.     });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <h1> Onload Sample</h1>
  25. <p>This script will show how to use a simple html file to display your content in a JS Pop-up.</p>
  26. <p>&nbsp;</p>
  27. <p>By changing the offer.html file you can change what is displayed</p>
  28. </body>
  29. </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.

Code: [ Select ]
<!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>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Onload With Timer</title>
  6. <style type="text/css">
  7. body{ font-family:Verdana, Arial, serif; font-size:14px;}
  8. </style>
  9. <link media="screen" rel="stylesheet" href="css/colorbox.css" />
  10. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  11. <script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
  12. <script type="text/javascript">
  13. $(function()
  14. {
  15.   $(window).bind('load',
  16.     function(e)
  17.     {
  18.       window.setTimeout(function(){ $.colorbox({opacity:0.3, href:"offer.html"}); }, /*timeout->*/ 2000);
  19.     });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <h2>Onload with Timer</h2>
  25. <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>
  26. </body>
  27. </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.

Code: [ Select ]
/*
  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')");
}
  1. /*
  2.   ColorBox Core Style:
  3.   The following CSS is consistent between example themes and should not be altered.
  4. */
  5. #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
  6. #cboxOverlay{position:fixed; width:100%; height:100%;}
  7. #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
  8. #cboxContent{position:relative;}
  9. #cboxLoadedContent{overflow:auto;}
  10. #cboxTitle{margin:0;}
  11. #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
  12. #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
  13. .cboxPhoto{float:left; margin:auto; border:0; display:block;}
  14. .cboxIframe{width:100%; height:100%; display:block; border:0;}
  15. /*
  16.   User Style:
  17.   Change the following styles to modify the appearance of ColorBox. They are
  18.   ordered & tabbed in a way that represents the nesting of the generated HTML.
  19. */
  20. #cboxOverlay{background:url(../images/overlay.png) repeat 0 0;}
  21. #colorbox{}
  22.   #cboxTopLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px 0;}
  23.   #cboxTopRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px 0;}
  24.   #cboxBottomLeft{width:21px; height:21px; background:url(../images/controls.png) no-repeat -101px -29px;}
  25.   #cboxBottomRight{width:21px; height:21px; background:url(../images/controls.png) no-repeat -130px -29px;}
  26.   #cboxMiddleLeft{width:21px; background:url(../images/controls.png) left top repeat-y;}
  27.   #cboxMiddleRight{width:21px; background:url(../images/controls.png) right top repeat-y;}
  28.   #cboxTopCenter{height:21px; background:url(../images/border.png) 0 0 repeat-x;}
  29.   #cboxBottomCenter{height:21px; background:url(../images/border.png) 0 -29px repeat-x;}
  30.   #cboxContent{background:#fff; overflow:hidden;}
  31.     .cboxIframe{background:#fff;}
  32.     #cboxError{padding:50px; border:1px solid #ccc;}
  33.     #cboxLoadedContent{margin-bottom:28px;}
  34.     #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
  35.     #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
  36.     #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
  37.     #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
  38.     #cboxPrevious:hover{background-position:-75px -25px;}
  39.     #cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
  40.     #cboxNext:hover{background-position:-50px -25px;}
  41.     #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
  42.     #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
  43.     #cboxClose{position:absolute; bottom:0; right:0; background:url(../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
  44.     #cboxClose:hover{background-position:-25px -25px;}
  45. /*
  46.  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  47.  when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
  48.  See: http://jacklmoore.com/notes/ie-transparency-problems/
  49. */
  50. .cboxIE #cboxTopLeft,
  51. .cboxIE #cboxTopCenter,
  52. .cboxIE #cboxTopRight,
  53. .cboxIE #cboxBottomLeft,
  54. .cboxIE #cboxBottomCenter,
  55. .cboxIE #cboxBottomRight,
  56. .cboxIE #cboxMiddleLeft,
  57. .cboxIE #cboxMiddleRight {
  58.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
  59. }
  60. /*
  61.  The following provides PNG transparency support for IE6
  62.  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
  63. */
  64. .cboxIE6 #cboxTopLeft{background:url(../images/ie6/borderTopLeft.png);}
  65. .cboxIE6 #cboxTopCenter{background:url(../images/ie6/borderTopCenter.png);}
  66. .cboxIE6 #cboxTopRight{background:url(../images/ie6/borderTopRight.png);}
  67. .cboxIE6 #cboxBottomLeft{background:url(../images/ie6/borderBottomLeft.png);}
  68. .cboxIE6 #cboxBottomCenter{background:url(../images/ie6/borderBottomCenter.png);}
  69. .cboxIE6 #cboxBottomRight{background:url(../images/ie6/borderBottomRight.png);}
  70. .cboxIE6 #cboxMiddleLeft{background:url(../images/ie6/borderMiddleLeft.png);}
  71. .cboxIE6 #cboxMiddleRight{background:url(../images/ie6/borderMiddleRight.png);}
  72. .cboxIE6 #cboxTopLeft,
  73. .cboxIE6 #cboxTopCenter,
  74. .cboxIE6 #cboxTopRight,
  75. .cboxIE6 #cboxBottomLeft,
  76. .cboxIE6 #cboxBottomCenter,
  77. .cboxIE6 #cboxBottomRight,
  78. .cboxIE6 #cboxMiddleLeft,
  79. .cboxIE6 #cboxMiddleRight {
  80.   _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')");
  81. }



Thanks for reading my post, hope it helps someone in need.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • BossMan1
  • Newbie
  • Newbie
  • BossMan1
  • Posts: 13

Post 3+ Months Ago

thanks, Zealous! I am new to coding and would like to learn more. this will help me definitely.

Post Information

  • Total Posts in this topic: 2 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.