JQuery - tüm sayfayı karartın ve bir div öğesinin solmasını sağlayın

Question

Aşağıdakileri yapmaya çalışıyorum: - bir arka plana karar veren bir DIV (# sayfa kapaklı) gösterecek bir işlevi tetikleyen bir bağlantı tıklatıldı. Bu div 999 z-index var - Sonra başka div (#red) daha yüksek Z-endeksine

Benim CSS ile karartılmış arka plan/fadeup/gösteri üzerine görünmesini istediğiniz:

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

sayfa kapak sözde olarak yukarı kaybolur, ancak ben hiçbir ettik Daha sonra herhangi bir başarı elde edildi.

Herhangi bir öneriniz var mı?

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

Bu biraz daha farklı bir yaklaşım, ama sonra ne konum olduğunu düşünüyorum. Satır içi JS yerine, sayfa yüklendiğinde <a> etiketine bir tıklama etkinliğini bağlarız. CSS'yi güncelledim, böylece KIRMIZI div gizlendi ve kesinlikle yerleşti. Ekran boyutlarını çekip, ortalanmadan önce ortalanmış olarak konumlandırmanız gerekebilir, bu sizin niyetiniz varsa lütfen bildirin ve cevabı güncelleyeceğim.