Pop [over] goes the weasel.

August 9, 2006 2:37 PM

How can I make nifty mini pop-up window boxes that appear within a window (a la Gmail)?

I'm looking for JavaScript examples or other guidance on how to make "windows" that appear on clicks or mouseovers on sites like Gmail, where it's not a separate window but rather a little box that is the top layer and covers whatever's underneath. Anyone have experience with these? I'm having trouble figuring out the code snippets that create them...

posted by EnormousTalkingOnion to computers & internet (10 comments total)

I think what you are looking for is a hidden DIV that appears on a certain action (such as mouse over). Here is a good basic example of how it is done that should get you pointed in the right direction.
posted by The Radish at 2:44 PM on August 9, 2006

Probably your best bet is to find a kit/library that behaves the way you want. For instance, Yahoo's UI library has a tooltip capability. Read the documentation on how to get it into your page.
posted by letourneau at 2:47 PM on August 9, 2006

Actually, re-reading your question, the Dialog feature in the Yahoo UI library is probably what you're actually looking for: a modal "window" that partially covers your main page and can be used for displaying status messages or presenting options?
posted by letourneau at 2:51 PM on August 9, 2006

Gmail's chat window -- at least if you press a little button -- is not a DIV. It's a separate window. You can close other browser windows and keep just it running on your desktop.
posted by grumblebee at 3:08 PM on August 9, 2006

You might also look into the scriptaculous library, which is pretty easy to use, and has lots of superfluous visual effects to play with. (Look at Effect.Appear, Effect.Fade, for example.)
posted by ook at 3:23 PM on August 9, 2006

Now that I'm finished, I'm not 100% sure this is what you wanted, but I assumed you were asking about the little "loading" or "saving" boxes that pop up on Gmail to tell you what's going on in the background. If so, this is kinda like that. I dunno, I'm still learning javascript, so maybe it's totally weak. Hope it works for you.
posted by Hildago at 5:43 PM on August 9, 2006

(And if it is, I'm happy to explain anything that doesn't make sense)
posted by Hildago at 5:45 PM on August 9, 2006

hey guys, good suggestions so far, the Yahoo UI library might be the ticket. The kinds of boxes in Gmail I'm thinking about are like the floating panels that show up to autocomplete e-mail addresses as you type them or the box that shows up when you mouseover someone on your Contacts list...
posted by EnormousTalkingOnion at 8:21 PM on August 9, 2006

Oh, those?

Those are just DIVS.

I hate figuring out how to write code in mefi, so I'm using [ ] instead of angle brackets:

In the HTML:

[div id="popup"]some content[/div]

In the CSS (to make the div invisible by default):

#popup
{
position:absolute;
width:300px;
height:200px;
left:340;
top:220;
visibility:hidden; /* < -- the key bit */br> }

In the Javascript:

var popup = document.getElementById("popup");
popup.style.visibility = visible;

In addition to this, you need to learn how to trigger that Javascript based on some event. This is the trickiest part in terms of cross-browser compatibility. There are various .js files floating around that can simplify it for you. Here's one that I've used a few times.

You paste that code (linked to above) into a file called, say, utils.js. Then, in the head of your html, add the following:

[script type="text/javascript" src="utils.js"]
[script type="text/javascript" src="popup.js"]

The second is your script. Make sure it comes second, because it will use the code in utils.js -- so that file needs to load first.

In popup.js, you can then call the addEvent() function. This isn't native to Javascript. It's defined in utils.js. But it allows you to set up trigger-based events that work in all modern browsers.

In the html file, add an anchor tag like this:

[a href="#" id="trigger"]click here[/a]

In the javascript file, popup.js, type the following:

//this runs the init function after the
//browser window has loaded the whole page
addEvent(window,'load',init);

function init()
{
//get the anchor tag
var trigger = document.getElementById("trigger");

//hook things up so that when someone
//clicks the text "click here", the div appears
addEvent(trigger,'mousedown',showPopup);
}

function showPopup()
{
//here's where the Javascript from above goes
var popup = document.getElementById("popup");
popup.style.visibility = visible;
}
posted by grumblebee at 10:08 PM on August 9, 2006

You may also want to take a look at Thickbox. it's much lighter than YUI, and it's drop-in-and-go.
posted by bkudria at 8:40 AM on August 10, 2006