33. 웹 표준 사이트 만들기(2019) - 레이어 팝업

33. 웹 표준 사이트 만들기(2019) - 레이어 팝업

팝업은 2종류가 있다. 레이어 팝업, 윈도우 팝업이 있다. 요즘은 레이어 팝업을 많이 쓴다.

 

소스

index.html

...

<!-- 팝업 -->

<div class="popup">

           <h4>Advertisement</h4>

           <ul>

                      <li class="layer"><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>

                      <li><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>

                      <li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>

           </ul>

</div>

<!-- //팝업 -->

...

<!-- layer popup -->

<div id="layer">

           <img src="img/webstandard1.jpg" alt="웹 표준 사이트">

           <a href="#" class="close">Close</a>

</div>

<!-- //layer popup -->

...

//레이어 팝업

$(".layer").click(function(e){

           e.preventDefault();

           //$("#layer").css("display", "block");

           //$("#layer").show();

           $("#layer").fadeIn(200);

           //$("#layer").slideDown();

          

           //여기서는 토글이 필요없다.

});

 

 //레이어 팝업

$("#layer .close").click(function(e){

           e.preventDefault();

           //$("#layer").css("display", "none");

           //$("#layer").hide();

           $("#layer").fadeOut(200);

           //$("#layer").slideUp();

          

           //여기서는 토글이 필요없다.

});

 

style.css

/* 레이어 팝업 */

/* position: fixed;는 위치가 고정된다. box-shadow는 css3효과이다. */

#layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);}

/* display:block을 주면 이미지 아래 빈공간이 안생긴다. 이미지는 인라인 구조다. 거기에 폰트값이나 라인헤이트 값이 숨겨져 있어 공간을 차지하기 때문에 아래

빈 공간이 생긴다.display:block을 줄수 없다면 height값을 주면 된다.(#layer에?) */

#layer img {width: 100%; display: block;}

/* position:absolute은 position: fixed 기준으로 위치 설정되는듯. color는 폰트컬러이다(#fff는 하얀색) */

#layer .close {position:absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;}

#layer .close:hover {text-decoration: underline;}