View Full Version : Problem with transparency on full page overlay

Dec 18th, 2008, 12:38 AM
I followed a tutorial to create a full page overlay which is hidden until you click a link. It works but I want a graphic to appear in the overlay when the link is clicked. The graphic is the same transparency as the background instead of being 100% opacity. Can someone tell me how to tweak this so it works properly?

Click the small diagram to initiate the overlay...
Rich V


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Western Hoist Inc. - Western Lift - National City, CA</title>
<link href="0Styles.css" rel="stylesheet" type="text/css" />
#displaybox {
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
position:fixed; top:0px; left:0px; width:100%; height:100%; text-align:center; vertical-align:middle;

<body id="body_replace">
<div id="main">
<div id="header"><a href="index.html"><img src="images/main_header.png" width="930" height="149" border="0" /></a></div>
<div id="leftNav">
<ul id="nav">
<li id="nav_about"><a href="about_us.html">About Us</a></li>
<li id="nav_purchase"><a href="purchase_lifts.html">Purchase Lifts</a></li>
<li id="nav_replace"><a href="replacement_parts.html">Replacement Parts</a></li>
<li id="nav_how"><a href="how_to_order.html">How to Order</a></li>
<li id="nav_contact"><a href="contact.html">Contact Us</a></li>
<li id="nav_home"><a href="index.html">Home</a></li>
<div id="leftColumn"><span class="body"><strong>Western Hoist, Inc.</strong><br />
1839 Cleveland Avenue<br />
National City, CA 91951<br />
Phone (619) 474-3361<br />
Fax (619) 474-8261</span>
<p><a href="http://www.adobe.com/go/EN_US-H-GET-READER" target="_blank"><img src="images/getacro.gif" width="88" height="31" border="0" /></a></p>
<div id="mainColumn">
<h3 class="header">Replacement Parts </h3>
<p>Choose a model below to view diagrams and parts list. </p>
<p><strong><a href="#">HR-6 and TC-25</a><br />
WSO Models and Y2K Models<br />
WL Models<br />
In-Ground Frame Engaging Models<<br />
In-Ground Movable Piston Models &amp; Rail Type Models
<hr />
<p>HR-6 and TC-25 &quot;Tire Chief&quot; </p>
<p><a href='#' onclick='return clicker();'><img src="images/HR-6.gif" width="221" height="152" border="1" /></a> </p>

<div id="footer">&copy;2008 Western Hoist Inc. <img src="images/838383.gif" width="360" height="1" /> <a href="about_us.html">About Us</a> | <a href="purchase_lifts.html">Purchase Lifts</a> | <a href="replacement_parts.html">Replacement Parts</a> | <a href="how_to_order.html">How To Order</a> | <a href="contact.html">Contact Us</a> </div>
<div id="displaybox" style="display: none;"></div>

function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><img src='images/HR-6.gif'/><br><br><a href='#' onclick='return clicker();' style='color:white'>CLOSE WINDOW</a></td></tr></table>";
thediv.style.display = "none";
thediv.innerHTML = '';
return false;

Dec 18th, 2008, 12:45 AM
I don't know how to fix that one but there are other lightboxes you could try:

eg. http://www.huddletogether.com/projects/lightbox2/

Dec 19th, 2008, 09:18 PM
Thanks for the tip, that is just the lighbox I was looking for and super easy to configure.