테스트 사이트 - 개발 중인 베타 버전입니다

해당 레이아웃 클릭시 그 레이아웃만 나오게 하고 싶은데요 ㅠ,ㅠ 채택완료

퍼레버의리 11년 전 조회 10,011

소스 보시면 두개의  [미리보기]​,[수정] 다른 id값 레이아웃이 있습니다.

 

클릭을 하게 되면 해당 창이 나오게 되는데

 

문제는 ​[미리보기]를 클릭하면 [수정] 의 레이아웃도 창이 뜨는겁니다 ㅠ,ㅠ

 

한창만 나와야 하는데 2개의 창이 동시에 뜨네요 ㅠ.ㅠ

 

분명 id값을 다르게 지정해주었는데 왜그렇죠?

 

ㅠ,ㅠ​

 

</span></p><p><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><a href="#" id="page_layer_open" style="color:#0099CC">[미리보기]</a>      //클릭시 해당 id="layer1"​ 창 열기</span><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"> </span></p><p><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><a href="#" id="page_edit_open" style="color:#0099CC">[수정]</a>              //클릭시 해당  id="layer2"​ 창 열기 ​ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">  </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="layer"> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="bg"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="layer_area" id="layer1">                      // id값이 layer1인 창 </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><iframe src='주소1'></iframe> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div style='text-align:right'><a href='#' id='layer_close'><img src='닫기이미지​' /></a></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">  </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="layer"> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="bg"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div class="layer_area" id="layer2">    // id값이 layer2인 창​ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">  </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><iframe src='주소​2' ></iframe> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><div style='text-align:right'><a href='#' id='layer_close'><img src=​'닫기이미지' /></a></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></div> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><script> </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">function layer_open(el){ </span></p><p>$('.layer').fadeIn();<span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">var temp = $('#' + el);temp.fadeIn(); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">else temp.css('top', '0px'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">else temp.css('left', '0px'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">} </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">$('#page_layer_open').click(function(){ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">layer_open('layer1'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">}); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">$('#page_edit_open').click(function(){ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">layer_open('layer2'); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">}); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"> $('.layer .bg').click(function(){ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">$('.layer').fadeOut(); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">}); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">$('#layer_close').click(function(){ </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">$('.layer').fadeOut(); </span><br style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">}); </span></p><p><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);"></script></span> </p><p><span style="font-family: 돋움, dotum, helvetica; font-size: 12px; line-height: 20.399999618530273px; text-align: justify; background-color: rgb(236, 237, 239);">

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
11년 전

layer1 이 class=layer 로 감싸져 있고

layer2 도 class=layer 로 감싸져 있는데

function layer_open(el){

 $('.layer').fadeIn(); <-- 이게 실행 되면서 2개 모두 보이는겁니다

 위 코드 수정

vv= el.replace('layer','') -1;

$('.layer').eq(vv).fadeIn();


 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인