Jquery - 调暗整个页面并淡化一个div元素 [英] Jquery - dim entire page and fade up one div element

问题描述

我尝试执行以下操作：
- 单击链接会触发一个函数，该函数将显示DIV（＃page-cover）调暗我的整个背景。这个div的z-index为999
- 然后我希望另一个div（#red）出现在带有更高z-index的暗淡背景/ fadeup / show上

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

我的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);
    });
}

页面封面按照假设逐渐消失，但是我没有取得任何成功之后会出现#red。

有什么建议吗？

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

Any suggestions?

推荐答案

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

这是一种略有不同的方法，但我认为这就是你所追求的。我们在页面加载时将点击事件绑定到< a> 标记，而不是内联JS。我已经更新了CSS，以便隐藏RED div，并且绝对定位 - 覆盖层上方。您可能需要拉动屏幕尺寸并将其放在中心位置，然后将其淡入，让我知道这是否是您的意图，我会更新答案。

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.

这篇关于Jquery - 调暗整个页面并淡化一个div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！