How do you make those newfangled pop-up windows?

Question

How do you make those newfangled pop-up windows, the Web 2.0 kind, like when a site wants you to take a survey or donate money? And more importantly, what are they called?

Answer 1

They're nothing more than fancy styled <div> tags (or something similar).

Any decent UI package out there will have something like it. ExtJS has a "Dialog" class, as does jQuery. I think that'll be what you're looking for.

Ex: http://jqueryui.com/demos/dialog/

Answer 2

They most originated from 'lightboxes' where images were shown in an overlay. Nowadays you'll probably find they're called 'thickboxes' because they do more than images.

Here's one.

IMO both of these are just types of Modal windows.

The name doesn't really matter, of course. Most javascript UI libraries have something like this available.

Answer 3

One more example: http://fancybox.net/example

Note that, from a user interface perspective, Dialog is not the same as lightbox.

Dialog is for short text, alert messages, where lightbox emphasis an image or a piece of content.

Answer 4

They're called popups. You'll find some custom implementations that are called something else (lightbox, for instance). basically, you create a div and set its zIndex higher than anything else on the page, and set its position to absolute, its top and left for positioning on the page.

Some developers also create a mask (to hide or inactivate the rest of the page while the popup is visible - and to make it act as if it were a modal dialog). To do this, create another div with a background color (usually black or white), then set the opacity to something like 50 - 70 % - then set its zIndex higher than anything else on the page (but lower then the popup), and set its position to absolute, its top and left to 0 and width and height to match the page.

Answer 5

I'd call those popovers, to distinguish them from popups which are normally considered separate browser windows. DIV overlay is another good term.

How to make them? It's really simple if you don't need fullscreen shading behind it, and you don't need to overlay Flash or dropdowns in IE6. All it is is an absolute positioned DIV. Say you have a DIV in your page like this:

<div style="display:none" class="survey">
    <h1>Take the annoying survey please</h1>
    <form>
    <ol>
        <li>
             Did this survey popover annoy you so much you'll never visit
             this site again and you'll click X to delete the result
             from the Google search that brought you here?<br>
             <input type="checkbox" value="yes" id="hellyes">
                 <label for="hellyes">Yes</label><br>
             <input type="checkbox" value="no" id="nope">
                 <label for="nope">Nope</label><br>
             <input type="submit">
       </li>
    </ol>
    </form>
</div>

All you do to show it as a popover is give it this CSS:

display:block; position:absolute;
top:100px; left:300px; width:300px;
border:2px solid black;
/* Add fancier styling here */