DIV (오버레이)가 클릭시 슬라이드 아웃됩니까?

Question

일부 정보가 포함 된 내 웹 사이트에 "오버레이"효과를 만들려고합니다.

나는이 주제와 관련된 정보를 찾으려고했지만 아직 행운을 얻지 못했습니다.

내가 기본적으로 찾고 있어요 것은이 수행 뭔가 :

http://imgur.com/MWM1V8w,69OTrAe#0

나는 조금 장난 봤는데하지만 난 내 웹 사이트에 적용 할 때, 그것은 끔찍 일반적으로 확장 잘 작동하지 않습니다.

더 좋은 해결책을 아는 사람이 있습니까?

Answer 1

올바른 길을 찾아야합니다.

index.html을

<div id="your_website"> 
    <button>Open overlay</button> 
</div> 
<div id="overlay"> 
    <p>Add anything here</p> 
    <button>Close overlay</button> 
</div> 

CSS :

#your_website { 
    width: 100%; 
    height: 500px; 
    background: green; 
} 

#overlay { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    background: lightgray; 
    width: 100%; 
    height: 100%; 
} 

#overlay.active { 
    display: block; 
} 

자바 스크립트 :이 위해 jQuery를 필요

$("#your_website button").click(function() { 
    $("#overlay").addClass("active"); 
}); 

$("#overlay button").click(function() { 
    $("#overlay").removeClass("active"); 
}); 

참고. 기본적으로 숨겨진 요소를 만든 다음 '활성'상태로 만들고 다른 모든 요소 위에 위치시킵니다. 그것을 닫기 위해 단추를 추가하는 것을 잊지 마십시오.