개발 Q&A

제목 해당 레이아웃 클릭시 그 레이아웃만 나오게 하고 싶은데요 ㅠ,ㅠ
글쓴이 AMKORJS 작성시각 2014/08/01 16:54:36
댓글 : 1 추천 : 1 스크랩 : 0 조회수 : 12623   RSS

소스 보시면 두개의  [미리보기]​,[수정] 다른 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> 

 

 다음글 댓글 만들기 질문합니다. (8)
 이전글 정말 궁금합니다. innodb vs myisam ...... (2)

댓글

kaido / 2014/08/01 20:19:03 / 추천 0
layer1 과 layer2 둘다 안 숨겨놓고 시작해서 그런거 아닌가요?
둘다 숨겨진 상태로 클릭한 것만 오픈.