레이어 팝업 띄울시 한페이당 id값을 2개로 각각 띄우는 방법에 대해 ㅠ.ㅠ
본문
<a href="#" id="page_layer_open" style="color:#0099CC">[미리보기]</a> //클릭시 해당 id="layer1" 창 열기
<a href="#" id="page_edit_open" style="color:#0099CC">[수정]</a> //클릭시 해당 id="layer2" 창 열기
<SCRIPT LANGUAGE="JavaScript">
$(function($){
function layer_open(el){
$('.layer').fadeIn();
var temp = $('#' + el);
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'); /* 열고자 하는 것의 아이디를 입력 */
return false;
});
$('#page_edit_open').click(function(){
layer_open('layer2'); /* 열고자 하는 것의 아이디를 입력 */
return false;
});
$('.layer .bg').click(function(){
$('.layer').fadeOut();
});
$('#layer_close').click(function(){
$('.layer').fadeOut();
return false;
});
$(document).ready(function(){
});
});
//-->
</SCRIPT>
<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>
결과는 정상적으로 창이 나옵니다 ㅠ,ㅠ 하지만 ㅠㅠ
클릭시 해당되는 id값만 창이 나와야 하는데 나머지id값인 창도 나오네요 ㅠ,ㅠ
총 2개의 창이 나오는데요 ㅠ,ㅠ
왜 id값을 다르게 지정해주었는데 모두 출력이 되는건가요? ㅠ,ㅠ
자바스크립트 안에 layer_open(el) 함수안에 el을 찍어봐도 각각 해당되는 id값만 나오는데 ㅠ,ㅠ
답변 1
$('.layer').fadeIn();
var temp = $('#' + el);
=>
var temp = $('#' + el);
temp.fadeIn();
답변 감사합니다 ㅠ,ㅠ 그런데 2개 뜨는거는 머죠? ㅠ,ㅠ
<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) {
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>