Geek Answers Handbook

HTML and CSS Pop-up and Disabled Window

This is a stupid question, because I can’t find suitable keywords to use the answer, for example, by searching on Google.

You know, when you click the link, and the background becomes dull and becomes unusable, but in the foreground is usually an image or login window? How is the method of displaying a Yahoo mailbox where everything in the background becomes gray-transparent and the image itself is just fine?

How it's done? And what is it called?

+4
source share
5 answers

this is done by creating an overlay div on the fly in JS, for example:

var gab = document.createElement('div'); gab.setAttribute('id', 'OVER'); gab.innerHTML='<div class="overlay"><h1>hello</h1></div>'; document.body.appendChild(gab);

use a CSS class like

 #OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;} .overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}

dunno, what is it called ..

+5
source

Do you want to create a “modal box” or a “lightbox”. Examples:

+4
source

Thickbox

for example: http://jquery.com/demo/thickbox/

+1
source

For images and materials I use prettyphoto

For Dialog popup

all this is done using jquery javascript

+1
source

You can use smoothbox as well as mootools .

+1
source

More articles:


All Articles