레이어팝업 질문드립니다.
본문
안녕하세요
아래 처럼 간단한 레이어팝업을 사용중입니다.
(클릭 하면 뜨는 창)
a링크 open1을 누르면 id open1 이 뜨는 형식입니다.
<a href="#open1">보기</a>
<div class="pop_content" id="open1">
<div class="pop_wrap">
<div class="point1">1</div>
<p>팝업내용</p>
</div>
</div>
css
.pop_content {
display:block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity:0;
padding:0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
pointer-events: none;
z-index:99999;
background:rgba(0,0,0,0.5)
}
.pop_content:target {
opacity:1;
pointer-events: auto;
}
.pop_content .pop_wrap {
position:absolute;
z-index: 99;
padding:50px 10px;
background:#fff;
width: 100%;
height:100%;
}
이렇게 사용중인데
open1 을 누르면 팝업안 class중
<div class="point1"></div>
open2를 누르면 class="point2" 가
open3을 누르면 class="point3" 이...
한 20개 정도 되는데
이걸 일일이 20개 만드는건 너무 비효율적일것같아서요..ㅎ
혹시 효육적인 기가막힌 방법이 있을지요..
고수님들의 도움 부탁드립니다..ㅠ
답변 2
<a href="javascript:" onclick="open_layer('open1')">보기</a>
<script>
function open_layer(id) {
$('#'+id).show();
}
</script>
<?php for($i=1;$i<=20;$i++){ ?>
<a href="#open<?php echo $i ?>">보기</a>
<div class="pop_content" id="open<?php echo $i ?>">
<div class="pop_wrap">
<div class="point"><?php echo $i ?></div>
<p>팝업내용<?php echo $i ?></p>
</div>
</div>
<?php } ?>
답변을 작성하시기 전에 로그인 해주세요.
