fitting absolute div popup in screen

Sorry maybe I was not clear in my original question below...

What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.

So I want to know how this is determined and calculated.

How can I use javascript to make sure a popup开发者_JAVA百科 div fits inside the window when it appears?

A good example is google's image search. When a image does not fit in the window (either it is the far right most or bottom most image), somehow it is pushed inside when the popup is opened with the mouseover event. How is this calculated and how can I create a script to calculate this.

you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.

There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).

For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.

This is one of the best i've come across http://gettopup.com/