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">× 닫기</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">× 닫기</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">× 닫기</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>