팝업창 쉽게 적용 하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

팝업창 쉽게 적용 하기 정보

팝업창 쉽게 적용 하기

본문

팝업 링크에대해 보다 쉽게 처리 하기 위해 만들어 봣습니다.
제이쿼리 사용했습니다.

<ul class="popup">
<li><a href="http://naver.com" class="s-1024-100">네이버팝업</a></li>
<li><a href="http://daum.net" class="s-200-200">다음팝업</a></li>
<li><a href="http://nate.com" class="s-300-300">네이트팝업</a></li>
<li><a href="http://google.com" class="s-400-400">구글팝업</a></li>

</ul>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('ul.popup a').click(function() {
var href = this.href, $this = $(this);
var cls = $this.attr('class');
var flag;

var re = /s-[\d]+-[\d]+/;
var arr = re.exec(cls);
if(arr) {
arr = arr[0].split('-');
flag = "width=" + arr[1] +",";  //창크기 a 태그에 class에 s-넓이-높이  준다 ex)class="s-500-500"
flag += "height=" + arr[2] + "";
window.open(href, 'popup', flag);
return false;
}
});
});
//]]>
</script>

추가로 옵션 넣으시면 됩니다.
width 팝업창 가로길이
height 팝업창 세로길이
toolbar=no 단축도구창(툴바) 표시안함
menubar=no 메뉴창(메뉴바) 표시안함
location=no 주소창 표시안함
scrollbars=no 스크롤바 표시안함
status=no 아래 상태바창 표시안함
resizable=no 창변형 하지않음
fullscreen=no 전체화면 하지않음
channelmode=yes 앞 또는 뒤로,창최소화. 닫기등을 설정한다. / F11번 키랑 같다
left=0 왼쪽에 창을 고정시킨다.
top=0 위쪽에 창을 고정시킨다.
추천
1
  • 복사

댓글 6개

© SIRSOFT
현재 페이지 제일 처음으로