CSS와 Jquery를 사용하여 희미한 효과

Question

내 질문을 이해하려면 아래 링크를 참조하십시오.

https://drive.google.com/file/d/0B52AyCZWoFl_TjdLQzNRQUFtaG8/edit?usp=sharing

사용자가 도움말 버튼을 클릭 할 때 일이, A 영역의 상자 유형이 화면 중앙에 표시되고 상자 뒤에 나머지 영역은 여전히 ​​볼 경우에도 나머지 영역 불구하고 색 바래. 나는 z-index를 사용하여 하나의 div를 다른 div 위에 표시하도록 만들 수 있다고 생각하지만 나머지 영역을 어떻게 희미 해 보이게 할 수 있는지 이해할 수는 없습니다.

간단한 예를 들어 설명해주십시오. 감사합니다

Answer 1

"페이딩"효과는 아마도 단지 반투명 오버레이 일 것입니다. "상자 유형"은 "모달 창"또는 "모달"이라고합니다.

많은 것을 달성하는 방법은입니다.

DEMO

<button id="trigger">Click me</button> 
<div class="overlay"></div> 
<div class="modal">Hello. I'm a modal window</div> 

---

.overlay { 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.6); 
    position:fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    display: none; 
} 

.modal { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 2; 
    display: none; 
} 

---

$('#trigger').click(function() { 
    $('.overlay,.modal').fadeIn(300); 
}); 

$('#close').click(function() { 
    $('.overlay,.modal').fadeOut(300); 
});