set background black with 50% opacity

Question

So, I have this div #welcome that runs this code

if ($.cookie('20120129') != '1') {
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

#welcome{
  position: absolute; z-index:100;
  background: #fff; color: #000;
  border: 1px solid black;
  display: none;
  width: 1000px;
  margin: 0 auto;
}
#welcome p{padding: 100px;}

I was wondering how to set a background layer between #welcome and the page with an 50% opicity, like thickbox/colorbox...

Solution 1

Add a fixed overlay that is hidden by default and shown when you need it. You can either add this to your HTML structure yourself, or use Jquery to add it. Personally I would add it to the HTML structure.

The .overlay element must have a z-index lower than #welcome but higher than any other elements it must cover:

.overlay {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
}

Updated Jquery to add / show overlay div:

//add overlay if it does not exist
if( $('.overlay').length == 0 ){
    $('body').append('<div class="overlay"></div>');
} 
if ($.cookie('20120129') != '1') {
    $('.overlay').show();
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

Solution 2

give welcome a z-index of 999 Create another div that has the size of your body with an z-index of 998. for the opacity you can just add an opacity of 0.5 :)

Solution 3

Basically you just provide a an absolutely positioned div with a background of rgba(0,0,0,0.5) or an opacity of 0.5. The z-index of the overlay should be less than that of the welcome element:

#welcome {
   z-index: 999;
}

#overlay {
   background: rgba(0,0,0,0.5);
   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 998;
}

Comments

[Alex]

hmmm... you're right. It's going to work but I am wondering if there is any other way.