Jquery - dim entire page and fade up one div element

Question

Im trying to do the following: - a Link is clicked triggering a function that will .show a DIV (#page-cover) dimming down my entire background. This div has a z-index of 999 - T

Answer 1

CSS

#page-cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 999;
    top: 0;
    left: 0;
}
    #red {
    background-color: red;
    width: 100px;
    height: 100px;
}

HTML:

//Triggering link
Element 1
//Div to appear upon dimmed DIV
hejsa
//Dimming DIV

JS

$(window).load(function(e){
  $('#triggeringlink').on('click',function(e){
     $("#page-cover").css("opacity",0.6).fadeIn(300, function () {            
        $('#red').css({'position':'absolute','z-index':9999});
     });
   e.preventDefault();
   });
});

This is a slightly different approach, but I think it's what you're after. Instead of inline JS, we're binding a click event to the tag when the page loads. I've updated the CSS so that the RED div is hidden, and positioned absolutely - above the overlay. You may need to pull screen dimensions and position it centered right before fading it in, let me know if this is your intent and I'll update the answer.