<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script type="text/javascript" src="script.js"></script> <script> $(document).ready(function(){ $("tr:odd").css("background-color","#D8D8D8"); }); </script> <style> table { border-collapse:collapse; font-size:12px; margin:0 20px 20px 20px; border-top:2px solid #015287; width:480px; } th { border-bottom: 2px solid #015287; color: #D15600; font-size: 14px; font-weight: normal; text-align: left; padding: 3px 8px; } td { padding: 6px; } #lightbox { display:none; background:#000000; opacity:0.9; filter:alpha(opacity=90); position:absolute; top:0px; left:0px; min-width:100%; min-height:100%; z-index:1000; } /* Lightbox panel with some content */ #lightbox-panel { display:none; position:fixed; top:100px; left:50%; margin-left:-200px; width:400px; background:#FFFFFF; padding:10px 15px 10px 15px; border:2px solid #CCCCCC; z-index:1001; } </style> <script> $(document).ready(function(){ $("a#show-panel").click(function(){ $("#lightbox, #lightbox-panel").fadeIn(300); }); $("a#close-panel").click(function(){ $("#lightbox, #lightbox-panel").fadeOut(300); }) }); </script> </head> <body> <table class="data"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Occupation</th> <th>Approx. Location</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>203A</td> <td>Johny Stardust (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="johnny_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>) </td> <td>Front-man</td> <td>Los Angeles</td> <td>$39.95</td> </tr> <tr> <td>141B</td> <td>Beau Dandy (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="beau_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>) </td> <td>Singer</td> <td>New York</td> <td>$39.95</td> </tr> <tr> <td>2031</td> <td>Mo' Fat (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="mofat_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>)</td> <td>Producer</td> <td>New York</td> <td>$19.95</td> </tr> <tr> <td>007F</td> <td>Kellie Kelly (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="kellie_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>)</td> <td>Singer</td> <td>Omaha</td> <td>$11.95</td> </tr> <tr> <td>8A05</td> <td>Darth Fader (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="fader_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>)</td> <td>DJ</td> <td>London</td> <td>$19.95</td> </tr> <tr> <td>6636</td> <td>Glendatronix (<a id="show-panel" class="lightbox" href="#">See Pic</a><div id="lightbox-panel"><img src="glenda_400.jpg"/><p align="center"><a id="close-panel" href="#">Click to close window</a></p></div>)</td> <td>Keytarist</td> <td>London</td> <td>$39.95</td> </tr> </tbody> </table> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)