website "pop ups"

[joemama718]

Does anyone know how websites achieve the "pop ups" where the content appears in the middle above everything, and the rest of the website is dimmed? It seems to be an implementation of CSS or Javascript (aka AJAX), but I can't figure out what they do...

 

For example, http://www.newgrounds.com/ uses this when you try to view a video - http://www.newgrounds.com/portal/view/402467. Click on "Watch this Video," and you'll see that the new video pops up.

 

Anyone know how to do this?

[awesomegamer]

I really have no idea, but I guess they might do it in flash if it is a flash based website :/

Have you found a solution yet?

[joemama718]

nope. =/ still looking. I'm thinking it's using javascript to change the x,y coordinates of a <div> object maybe...but I can't figure out how they darken the background like that.

[Prash]

It would be in flash but maybe not the whole page...

 

it wont be javascript to dim rest of page but u can use a div to place the pop up

[Fly America Virtual]

Get Google Toolbar It Helps Alot With PopUp's Or Go With Firefox It Contains A Google Toolbar

[ShannenName]

He isn't interested in blocking them but making them!

If anyone knows or finds out please post it here because I also am interested in how they do this!

[BabeWatcher]

He isn't interested in blocking them but making them!

If anyone knows or finds out please post it here because I also am interested in how they do this!

I guess it's a JavaScript in an external file ( <script src="url">), then a div is created (AppendNode), the new div gets a high z-index so it's at top of the page.

How they blend the rest of the page I still have to find out.

[dcvqksyb]

CSS used to hide everything, second one is for FireFox and Mac, first for all others

#overlayblackout {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    background-color: #000;
    filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7; }

#overlayblackout_ffmac {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90; }

 

JS used to add div tag

// Set up our background and append it to the body.
ourbody = document.getElementsByTagName("body").item(0);
pbackground = document.createElement("div");

if(!(IsFirefoxMac()))
{
    pbackground.setAttribute("id", movie_viewer.BACKGROUND_DIV);
}
else
{
    // Mac Firefox can't handle opacity stuff, so let's do a workaround.
    movie_viewer.BACKGROUND_DIV = "overlayblackout_ffmac";
    pbackground.setAttribute("id", movie_viewer.BACKGROUND_DIV);
    pbackground.style.backgroundImage = "url(http://img.ngfiles.com/blackbox.png)";
    pbackground.style.backgroundRepeat = "repeat";
}
pbackground.style.display = 'none';
ourbody.appendChild(pbackground);

 

I hope this helps.

[ShannenName]

While searching the web I also found this:

Dynamic Drive DHTML popup

[Wizard]

The theory is to create a mask above the body that darkens it, and then put a div on top that has normal colouring.

I believe Abc got closest to the mark, and even fixed it for OSes.