Jquery - dim entire page and fade up one div element

问题

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 - Then I want another div (#red) to appear upon the dimmed background / fadeup/show with a higher z-index

My 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
<a href="#" onclick="dimBackground("Element1")">Element 1</a>
//Div to appear upon dimmed DIV
<div id="red">hejsa</div>
//Dimming DIV
<div id="page-cover"></div>

Jquery

function dimBackground() {
    $("#page-cover").css("opacity",0.6).fadeIn(300, function () {
        //Attempting to set/make #red appear upon the dimmed DIV
        $('#red').css('zIndex', 10000);
    });
}

page-cover fades up as supposed, however i've not had any success making #red appear afterwards.

Any suggestions?

回答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
<a id="triggeringlink" href="#">Element 1</a>
//Div to appear upon dimmed DIV
<div id="red">hejsa</div>
//Dimming DIV
<div id="page-cover"></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 <a> 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.

来源：https://stackoverflow.com/questions/14913788/jquery-dim-entire-page-and-fade-up-one-div-element