팝업창 쉽게 적용 하기 정보
팝업창 쉽게 적용 하기본문
팝업 링크에대해 보다 쉽게 처리 하기 위해 만들어 봣습니다.
제이쿼리 사용했습니다.
<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 위쪽에 창을 고정시킨다.
제이쿼리 사용했습니다.
<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
1
댓글 6개
감사합니다.
팀 감사드립니다..^^
좋은 정보네요
좋은 정보네요.
홈페이지 index.php에 넣고 사용시 한글이 깨지는데 .... 한글을 제대로 나오게 어떻게 하나요
파일 속성을 utf-8로 변경 해보시기 바랍니다.