측면에 슬라이드 오버레이 -100 %

Question

내가 찾고있는 스크립트는 왼쪽으로 슬라이드를 직접 페이지로드하는 "전체 화면"오버레이 (div)입니다. -100 %이고 하위 div/페이지가 표시됩니다.

나는 잠시 동안 검색하고 테스트 해 왔지만 좋고 쉬운 스크립트를 찾을 수없는 것 같습니다.

나는 스크립트가 조금 같을 것이다 생각 :이 사용할 수있는 패널 또는 슬라이드 스크립트를 아는 사람이

<script type="text/javascript"> 
    $(function() { 
     $('#activator').click(function(){ 
      $('#overlay').fadeIn('fast',function(){ 
       $('#box').animate({'left':'0'},500); 
      }); 
     }); 
     $('#boxclose').click(function(){ 
      $('#box').animate({'left':'100%'},500,function(){ 
       $('#overlay').fadeOut('fast'); 
      }); 
     }); 

    }); 
</script> 

있습니까?

http://jsfiddle.net/davemcmillan/zJryc/

기본적으로, 자바 스크립트 컨테이너의 폭과 높이를 처음 설정 변수 - 당신이 여기에, 제대로 요구했는지 이해 한 경우

Answer 1

내 솔루션입니다. 그런 다음 컨테이너의 너비와 높이를 갖도록 오버레이를 설정합니다.

그런 다음 #overlay div에 '닫힌'클래스가 있는지 확인하는 토글 기능을 만듭니다. 클래스에 '닫힌'클래스가 있으면 버튼의 onclick이 오버레이를 열고, 그렇지 않으면 닫을 것입니다.

패널에서 onload를 열려면 Fiddle 링크에서 말한 부분의 주석을 취소하면됩니다.