Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML/CSS "Pop-Up" Window and Disabled Background

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?

like image 243
Sev Avatar asked Dec 17 '22 19:12

Sev


2 Answers

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 ..

like image 147
rémy Avatar answered Dec 30 '22 22:12

rémy


You want to create a "modal box" or "lightbox". Examples:

  • http://fancybox.net/
  • http://www.huddletogether.com/projects/lightbox2/
like image 22
Matt Asbury Avatar answered Dec 30 '22 22:12

Matt Asbury