Jquery - làm mờ toàn bộ trang và làm mờ dần một phần tử div

Question

Tôi đang cố gắng thực hiện như sau: - một liên kết được nhấp kích hoạt một chức năng sẽ hiển thị. div này có z-index của 999 - Sau đó, tôi muốn một div (#red) xuất hiện trên nền mờ/fadeup/hiển thị với z-index cao

CSS của tôi:

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

trang bìa mất dần lên như vụ, tuy nhiên tôi đã không t đã có bất kỳ thành công làm #red xuất hiện sau đó.

Bất kỳ đề xuất nào?

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

Đây là một cách tiếp cận hơi khác nhau, nhưng tôi nghĩ rằng đó là những gì bạn đang sau. Thay vì JS nội tuyến, chúng tôi sẽ ràng buộc sự kiện nhấp chuột vào thẻ <a> khi trang tải. Tôi đã cập nhật CSS để div RED bị ẩn và được đặt hoàn toàn - phía trên lớp phủ. Bạn có thể cần phải kéo kích thước màn hình và vị trí nó trung tâm ngay trước khi fading nó trong, cho tôi biết nếu đây là ý định của bạn và tôi sẽ cập nhật câu trả lời.