Set black background with opacity 50%

Question

So, I have this #welcome div 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 a page with 50% simplicity, like a thick box / colorbox ...

Answer 1

Add a fixed overlay, which is hidden by default and is displayed 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 should have a z-index lower than #welcome , but larger than any other elements that it should span:

 .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 }); } 

Answer 2

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

Answer 3

Basically, you just provide an absolutely positioned div with an rgba background (0,0,0,0,5) or an opacity of 0.5. The overlay Z-index should be less than 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; }