DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Darkening A Page With CSS

  • submit to reddit
        // description of your code here

Add this to your css file or inside your “head� tags:

.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70: /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 20;
height: 100%;
width: 100%;
top: 0px;
left: 0px;

Basically, this says set a style in CSS to have a black background, 70% transparent, filling the entire screen.

We then add this code anywhere inside our “body� tag:

<div id=�darkBackgroundLayer� class=�darkenBackground�>
<script language=�javascript� type=�text/javascript�>
document.getElementsById(�darkBackgroundLayer�).style.display = “none�;

This places our black box on the screen, and then the javascript hides it. We can then show it later on by putting this javascript in an event handler like onclick:

document.getElementsById(�darkBackgroundLayer�).style.display = “�;