Question

80

HTML/CSS Pop-Up Window and Disabled Background

rated 0 times [ 87] [ 7] / answers: 1 / hits: 21245 / 14 Years ago, thu, december 9, 2010, 12:00:00

This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.

You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?

How is that done? And what is it called?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

simone

Add To Favorites

Follow

Total Points: 558

Total Questions: 96

Total Answers: 99

Location: British Indian Ocean Territory

Member since Tue, Feb 22, 2022

2 Years ago

answered 14 Years ago isaacvalentinn · Accepted Answer

it's done by creating an overlaying div on the fly in JS, like:

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 how it's called ..