Changing The Background Opacity for LightWindows

When the LightWindow pops up, it darkens the original page underneath it. This has the cool effect of drawing your attention to the newly popped window, while reminding you that you are still on the same site. LightWindow makes the original page pretty dark, though, and our clients wanted it lighter than that.

Behind the scenes, LightWindow creates the “page goes dark” effect by stretching a transparent black squared completely over the browser window. IE and Firefox use different methods to make this square transparent, though. In IE, you load a black opaque image and then set the opacity to a decimal between 0 and 1. The lower the number, the more transparent it becomes. For instance, .7 would make the image 70% opaque or in other words, 30% transparent, .2 would make it 80% transparent. In Firefox, on the other hand, you create an already transparent .png file and just stretch that over the browser window. That means for Firefox, we’ll have to modify the .png file with a graphics editor like Fireworks. Since LightWindow seeks compatibility with both (and so do we), you will have to make a few steps to make the change.

For our project, we want to lighten the page from 70% opacity to 20%.

First we will create the transparent image that Firefox uses, adjusting the opacity to 20% and saving it as “black-20.png”:

  • Open “black.png” (in “images” directory) with Fireworks.
  • Select the Black bitmap object.
  • In the Properties window (probably at the bottom) you should see two dropdown boxes, one has “100%” in the box and the other has “Normal”.
  • Click on the down arrow by the “100%” box and move the slider down to “20%”.
  • Click somewhere else in the program. You will see the bitmap become more transparent.
  • From the menu: File–>Save as “black-20.png

Next we will modify the code in “lightwindow.js”

  • Open “lightwindow.js” (in the “javascript” directory) with your favorite text editor or Visual Studio.
  • Search for “opacity” to locate the following block of code:

overlay : {
opacity : 0.7,
image : 'images/black.png',
presetImage : 'images/black-70.png'

  • Change “opacity : 0.7″ to “opacity : 0.2″ (For IE).
  • Change the “presetImage” value to “black-20.png” (For FireFox).
  • Save.

overlay : {
opacity : 0.2,
image : 'images/black.png',
presetImage : 'images/black-20.png'

That should do it! Reload the page and verify that it works.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>