HTML·CSS·JQuery

레이어 팝업

ID.V 2020. 2. 19. 18:00

Layer popup code

<div id="popup1">
  <p><a href="#"><img src="팝업이미지이름1.jpg" title="팝업1" /></a></p>
  <div id="closeWrap1" class="closeWrap">
    <p><a href="#" class="popupToday">오늘 하루 열지 않기</a></p>
    <p><a href="#" class="popupClose">&times; 닫기</a></p>
  </div>
</div>
<div id="popup2">
  <p><a href="#"><img src="팝업이미지이름2.jpg" title="팝업2" /></a></p>
  <div id="closeWrap2" class="closeWrap">
    <p><a href="#" class="popupToday">오늘 하루 열지 않기</a></p>
    <p><a href="#" class="popupClose">&times; 닫기</a></p>
  </div>
</div>
<div id="popup3">
  <p><a href="#"><img src="팝업이미지이름3.jpg" title="팝업3" /></a></p>
  <div id="closeWrap3" class="closeWrap">
    <p><a href="#" class="popupToday">오늘 하루 열지 않기</a></p>
    <p><a href="#" class="popupClose">&times; 닫기</a></p>
  </div>
</div>

/* CSS */
<style type="text/css">
  #popup1{position:absolute; left:0px; top:0px; z-index:999; border:1px solid #000; background-color:#fff; display:block; width:250px;}
  #popup2{position:absolute; left:250px; top:0px; z-index:999; border:1px solid #000; background-color:#000; display:block; width:250px;}
  #popup3{position:absolute; left:500px; top:0px; z-index:999; border:1px solid #000; background-color:#000; display:block; width:250px;}
  .closeWrap{height:26px; line-height:26px; background-color:#000; font-size:12px}
  .popupToday{float:left; padding-left:8px; color:#fff;}
  .popupClose{float:right; text-align:right; padding-right:8px; color:#fff;}
</style>