해당 레이아웃 클릭시 그 레이아웃만 나오게 하고 싶은데요 ㅠ,ㅠ
본문
소스 보시면 두개의 [미리보기],[수정] 다른 id값 레이아웃이 있습니다.
클릭을 하게 되면 해당 창이 나오게 되는데
문제는 [미리보기]를 클릭하면 [수정] 의 레이아웃도 창이 뜨는겁니다 ㅠ,ㅠ
한창만 나와야 하는데 2개의 창이 동시에 뜨네요 ㅠ.ㅠ
분명 id값을 다르게 지정해주었는데 왜그렇죠?
ㅠ,ㅠ
<a href="#" id="page_layer_open" style="color:#0099CC">[미리보기]</a> //클릭시 해당 id="layer1" 창 열기
<a href="#" id="page_edit_open" style="color:#0099CC">[수정]</a> //클릭시 해당 id="layer2" 창 열기
<div class="layer">
<div class="bg"></div>
<div class="layer_area" id="layer1"> // id값이 layer1인 창
<div>
<iframe src='주소1'></iframe>
</div>
<div style='text-align:right'><a href='#' id='layer_close'><img src='닫기이미지' /></a></div>
</div>
</div>
<div class="layer">
<div class="bg"></div>
<div class="layer_area" id="layer2"> // id값이 layer2인 창
<div>
<iframe src='주소2' ></iframe>
</div>
<div style='text-align:right'><a href='#' id='layer_close'><img src='닫기이미지' /></a></div>
</div>
</div>
<script>
function layer_open(el){
$('.layer').fadeIn();
var temp = $('#' + el);temp.fadeIn();
if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
else temp.css('top', '0px');
if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
else temp.css('left', '0px');
}
$('#page_layer_open').click(function(){
layer_open('layer1');
});
$('#page_edit_open').click(function(){
layer_open('layer2');
});
$('.layer .bg').click(function(){
$('.layer').fadeOut();
});
$('#layer_close').click(function(){
$('.layer').fadeOut();
});
</script>
답변 1
layer1 이 class=layer 로 감싸져 있고
layer2 도 class=layer 로 감싸져 있는데
function layer_open(el){
$('.layer').fadeIn(); <-- 이게 실행 되면서 2개 모두 보이는겁니다
위 코드 수정
vv= el.replace('layer','') -1;
$('.layer').eq(vv).fadeIn();
