테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

레이어 팝업 띄울시 한페이당 id값을 2개로 각각 띄우는 방법에 대해 ㅠ.ㅠ 채택완료

퍼레버의리 11년 전 조회 9,701
답변 1
목록 

</p><p><a href="#" id="page_layer_open" style="color:#0099CC">[미리보기]</a>      //클릭시 해당 <span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">id="layer1"</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​ 창 열기</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"> </span></p><p><a href="#" id="page_edit_open" style="color:#0099CC">[수정]</a>               <span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">//클릭시 해당</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">   </span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">id="layer2"</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​ 창 열기</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"> </span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​</span></p><p> </p><p><SCRIPT LANGUAGE="JavaScript"> </p><p> </p><p><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">$(function($){</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>function layer_open(el){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.layer').fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var temp = $('#' + el);</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>else temp.css('top', '0px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>else temp.css('left', '0px');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('#page_layer_open').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>layer_open('layer1'); /* 열고자 하는 것의 아이디를 입력 */</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>return false;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('#page_edit_open').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>layer_open('layer2'); /* 열고자 하는 것의 아이디를 입력 */</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>return false;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">	</span></p><p>       <span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">$('.layer .bg').click(function(){</span></p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.layer').fadeOut();</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('#layer_close').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.layer').fadeOut();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>return false;</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$(document).ready(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p>});</p><p> </p><p>//--></p><p></SCRIPT> </p><p> </p><p><div class="layer"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="bg"></div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="layer_area" id="layer1">                       // id값이 <span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">layer1인 창</span></p><p><span class="Apple-tab-span" style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; white-space: pre;">		</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;"><div></span></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><iframe src='주소1'></iframe></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div style='text-align:right'><a href='#' id='layer_close'><img src='<span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">닫기이미지</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">' /></a></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></div></p><p></div></p><p> </p><p> </p><p> </p><p><div class="layer"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="bg"></div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="layer_area" id="layer2">     <span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">// id값이 </span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">layer2인 창</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​</span></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><iframe src='<span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">주소</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​2</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">' ></iframe></span></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div style='text-align:right'><a href='#' id='layer_close'><<span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">img src=</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">​'</span><span style="font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; line-height: 1.5;">닫기이미지' /></a></div></span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></div></p><p></div> </p><p> </p><p> </p><p> </p><p>

 

결과는 정상적으로 창이 나옵니다 ㅠ,ㅠ 하지만 ㅠㅠ 

 

클릭시 해당되는 id값만 창이 나와야 하는데 나머지id값인 창도 나오네요 ㅠ,ㅠ

 

총 2개의 창이 나오는데요 ㅠ,ㅠ

 

왜 id값을 다르게 지정해주었는데 모두 출력이 되는건가요? ㅠ,ㅠ 

 

자바스크립트 안에 layer_open(el) 함수안에 el을 찍어봐도 각각 해당되는 id값만 나오는데 ㅠ,ㅠ 

#그누보드5 #php #javascript #ajax
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

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

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

var temp = $('#' + el);

=>

var temp = $('#' + el);​

temp.fadeIn();​

 

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

답변에 대한 댓글 2개

�
퍼레버의리
11년 전
답변 감사합니다 ㅠ,ㅠ 그런데 2개 뜨는거는 머죠? ㅠ,ㅠ
�
슈와이
11년 전
<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>

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

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

로그인