Smooth Overlay

The jQuery tools available for Website development are like a cookbook full of wonderful recipes to try.  This one is called Overlay, an element (pop-up box) that overlays the web page that you are currently on.  There are three adjustable components to add to your code:  a little javascript, some html code for the overlay and the trigger, and then a liberal sprinkling of CSS.

First, select the trigger element (the html <a> tag) and enable overlaying with a little javascript:

$(function() {
$(“.triggers a[rel]”).overlay();

Second, define the trigger.  My trigger is when the user clicks on my image, comment-bubble.png the overlay element in the rel attribute is referenced.

<a rel=”#comment-box”><img src=”{proj_path}/images/comment-bubble.png”/> </a>

Then, add the html code that defines the rel element which as you can see above,  is a div named comment-box.  This is what will appear in the overlay.

<div id=”comment-box” class=”apple_overlay black”>
this is where you insert all of your code.  my code displayed beholder comments on a particular piece of art on a art website

Now some CSS to taste.  Define the styling for your overlay.

.apple_overlay {

/* default close button positioned on upper right corner */
.apple_overlay .close {
position:absolute; right:5px; top:5px;
} {


Here’s what it looks like on the site we’re building

image of overlay box

After clicking on the speech bubble the user sees the pop-up overlay.







Find this tool and more at:


~ by lamiak on January 5, 2011.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: