smarti,스마트아이

overlay with slide out box 예제

Overlay with slide out box

예제보기

다운로드

CSS-Overlay.zip

0.07MB

 

html에 두 개의 요소가 필요하다. 오버레이용 div와 상자용 div이다. 상자에는 닫기 아이콘과 일부 텍스트에 대한 링크 요소가 포함된다.

<div class="overlay" id="overlay" style="display:none;"></div>

<div class="box" id="box">
 <a class="boxclose" id="boxclose"></a>
 <h1>Important message</h1>
 <p>
  Here comes a very important message for your user.
  Turn this window off by clicking the cross.
 </p>
</div>

나중에 javascript에서 두가지 요소를 참조 할 것이기 때문에 아이디를 부여해야 한다.

오버레이는 처음에 표시되지 않기 위해 display:none으로 스타일 태그를 준다.

CSS

.overlay{
    background:transparent url(images/overlay.png) repeat top left;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}

브라우저 창이 아무리 넓어도, 항상 모든 페이지에 걸쳐 있게 할 것이다. position:fixed를 사용하면 스크롤 후 페이지 어디에 있든 항상 '0'으로 유지된다. 이 요소를 다른 요소들 위에 놓으려 'z-index' 지수를 높였다.

다음은 상자에 CSS 속성

.box{
    position:fixed;
    top:-200px;
    left:30%;
    right:30%;
    background-color:#fff;
    color:#7F7F7F;
    padding:20px;
    border:2px solid #ccc;
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    -khtml-border-radius:20px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index:101;
}

상자가 창에서 보이지 않게 하기 위해 음수 값을 주었다. 상자가 위쪽에서 미끄러지듯 보이기를 원하기 때문에 'display:none'을 하였고 위치 지정 작업을 해야한다. 페이지의 중앙에 요소를 배치 하기 위해 오른쪽에서 왼쪽과 동일한 거리를 지정하기만 하면된다. 백분율을 사용하면 모든 화면 크기에 맞게 요소를 적절하게 조정할 수 있다.

CSS3 속성 상자에 둥근 테두리와 그림자를 추가한다. 

닫기 버튼 스타일

a.boxclose{
    float:right;
    width:26px;
    height:26px;
    background:transparent url(images/cancel.png) repeat top left;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
}

'h1' 요소에도 스타일을 준다.

.box h1{
    border-bottom: 1px dashed #7F7F7F;
    margin:-20px -20px 0px -20px;
    padding:10px;
    background-color:#FFEFEF;
    color:#EF7777;
    -moz-border-radius:20px 20px 0px 0px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -khtml-border-top-left-radius: 20px;
    -khtml-border-top-right-radius: 20px;
}

 

JavaScript

다음 코드는 html 끝에 추가한다.

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });

});

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

[코딩공부] - CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

CSS와 jQuery로 풍경 애니메이션 만들기 예제 다운로드

 

[세상살이] - 유튜브 자막 다운로드 하는 방법

유튜브 자막 다운로드 하는 방법

[세상살이] - 플랩풋볼, 소셜 축구 풋살 용병 모임

플랩풋볼, 소셜 축구 풋살 용병 모임

[코딩공부] - CSS 박스모델, 마진, 아웃라인

CSS 박스모델, 마진, 아웃라인