Comments on: Pop [over] goes the weasel.

Question: Pop [over] goes the weasel.

EnormousTalkingOnion — Wed, 09 Aug 2006 14:37:28 -0800

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...

By: The Radish

The Radish — Wed, 09 Aug 2006 14:44:33 -0800

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.

By: letourneau

letourneau — Wed, 09 Aug 2006 14:47:50 -0800

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.

By: letourneau

letourneau — Wed, 09 Aug 2006 14:51:38 -0800

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?

By: grumblebee

grumblebee — Wed, 09 Aug 2006 15:08:25 -0800

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.

By: ook

ook — Wed, 09 Aug 2006 15:23:53 -0800

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.)

By: Hildago

Hildago — Wed, 09 Aug 2006 17:43:22 -0800

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.

By: Hildago

Hildago — Wed, 09 Aug 2006 17:45:25 -0800

(And if it is, I'm happy to explain anything that doesn't make sense)

By: EnormousTalkingOnion

EnormousTalkingOnion — Wed, 09 Aug 2006 20:21:29 -0800

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...

By: grumblebee

grumblebee — Wed, 09 Aug 2006 22:08:13 -0800

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;
}

By: bkudria

bkudria — Thu, 10 Aug 2006 08:40:07 -0800

You may also want to take a look at Thickbox. it's much lighter than YUI, and it's drop-in-and-go.