10

私は次のことをしようとしています: - リンクをクリックすると、DIV (#page-cover) を表示する関数がトリガーされ、背景全体が暗くなります。この div の z-index は 999 - 次に、別の div (#red) を薄暗い背景/フェードアップ/より高い 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>

Jクエリ

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 を表示させることに成功していません。

助言がありますか？

4

1 に答える 1

11

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

これは少し異なるアプローチですが、それがあなたが求めているものだと思います。インライン JS の代わりに<a>、ページの読み込み時にクリック イベントをタグにバインドしています。RED div が非表示になり、オーバーレイの上に絶対に配置されるように、CSS を更新しました。フェードインする前に、画面の寸法を取得して中央に配置する必要がある場合があります。これがあなたの意図であるかどうかをお知らせください。回答を更新します。

于 2013-02-16T18:55:30.760 に答える