Sure, pop-ups are evil -- if they're for advertisements. If they're to relay information from AJAX, perhaps not so much. ColorBox, a "customizable lightbox plugin for jQuery 1.3, 1.4, & 1.5" is a pretty good widget for in-window pop-up feedback.

But what's the minimum code I could use to display this jive? Glad you asked...

   1 <html>
   2 
   3 <head>
   4         <title>Simplest (give or take) Colorbox</title>
   5 
   6         <link media="screen" rel="stylesheet" href="./includes/colorbox.css" />
   7         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
   8         <!-- from http://colorpowered.com/colorbox/ -->
   9         <script src="./includes/jquery.colorbox.js"></script>
  10         <script>
  11                 // This is for colorbox support
  12                 function disFeedback(str)   {
  13                         elmOut = document.getElementById("feedback");
  14                         var d = new Date();
  15                         <?php
  16                                 if ($bDebug)   {
  17                                         echo "elmOut.innerHTML " .
  18                                          "= elmOut.innerHTML + \"<br><br>\\n\" + " .
  19                                          "d.getTime() + \"<br>\n\" + str;\n";
  20                                 }    else {
  21                                         echo "elmOut.innerHTML = str;\n";
  22                                 }
  23                         ?>
  24                         $.colorbox({width:"50%", inline:true, href:"#feedback"});
  25         //              alert('here');
  26                 }
  27         </script>
  28 </head>
  29 
  30 
  31 <body>
  32         This is some text.<br>
  33         <!-- below DIV is for colorbox info -->
  34         <div style='display:none'>
  35                 <div id='feedback' style='padding:10px; background:#fff;'></div>
  36         </div>
  37 
  38         <a href="#" onClick="disFeedback('<b>test feedback</b>');return false;">test</a>
  39 </body>
  40 
  41 </html>
  42


You must also have an includes folder that looks something like this...


Enjoy.

Labels: , , ,