웹마스터 팁
나름대로 만들어본 가운데 팝업 스크립트
2003.07.31 10:42
검색을 위해 : 해상도, 팝업, 화면, 중앙, 가운데, 새창
오랜만에 nzeo에 소스좀 구하러 들렸는데, 예전보다 강좌나 문답, 소스등이 많이 줄어든느낌이네요..
분명히 예전에 봐둔게 있었는데, 오늘 2시간 정도 찾았는데도 못찾았습니다.
제가 원하던것은 해상도에 따라 새창을 모니터의 정중앙에 팝업시키는것이었습니다.
그래서 나름대로 머리써봤습니다.
이것도 뭐 잘 찾아보면 훨씬 더 좋은 스크립트가 어딘가 있겠죠^^
뒷북인거는 알지만, 고생한 보람을 초보자 분들과 나누려고 올립니다.^^;
팝업창을 640*480으로 띄을때를 기준으로 했습니다.
좀더 연구하면 팝업창 사이즈에따라 계산을 해서 가운데로 오도록 할 수도 있겠죠...
그거는 숙제^^;
<html>
<head>
<title></title>
</head>
<body>
<script>
var hp; //왼쪽여백
var vp; //위쪽여백
hp = ( screen.width - 640 ) / 2 + 1; //screen.width가 모니터의 가로 해상도 입니다.
vp = ( screen.height - 480 ) / 2 + 1; //screen.height가 모니터의 세로 해상도 입니다.
document.write("<a href=#hs onclick='window.open("http://kr.yahoo.com","YAHOO","width=640,height=480, toolbars=no, scrollbars=yes, left="+hp+", top="+vp+"")'>야후 팝업</a>");
</script>
//href=#hs에서 hs는 아무렇게나 해주셔도 됩니다. href=#test 뭐 이렇게 해도 됩니다.
</body>
</html>
오랜만에 nzeo에 소스좀 구하러 들렸는데, 예전보다 강좌나 문답, 소스등이 많이 줄어든느낌이네요..
분명히 예전에 봐둔게 있었는데, 오늘 2시간 정도 찾았는데도 못찾았습니다.
제가 원하던것은 해상도에 따라 새창을 모니터의 정중앙에 팝업시키는것이었습니다.
그래서 나름대로 머리써봤습니다.
이것도 뭐 잘 찾아보면 훨씬 더 좋은 스크립트가 어딘가 있겠죠^^
뒷북인거는 알지만, 고생한 보람을 초보자 분들과 나누려고 올립니다.^^;
팝업창을 640*480으로 띄을때를 기준으로 했습니다.
좀더 연구하면 팝업창 사이즈에따라 계산을 해서 가운데로 오도록 할 수도 있겠죠...
그거는 숙제^^;
<html>
<head>
<title></title>
</head>
<body>
<script>
var hp; //왼쪽여백
var vp; //위쪽여백
hp = ( screen.width - 640 ) / 2 + 1; //screen.width가 모니터의 가로 해상도 입니다.
vp = ( screen.height - 480 ) / 2 + 1; //screen.height가 모니터의 세로 해상도 입니다.
document.write("<a href=#hs onclick='window.open("http://kr.yahoo.com","YAHOO","width=640,height=480, toolbars=no, scrollbars=yes, left="+hp+", top="+vp+"")'>야후 팝업</a>");
</script>
//href=#hs에서 hs는 아무렇게나 해주셔도 됩니다. href=#test 뭐 이렇게 해도 됩니다.
</body>
</html>
댓글 3
-
[아틀]아렌티
2003.07.31 17:45
제 밑에 있는 소스로 중앙정렬도 가능합니다만;; -
뒹굴리스트
2003.07.31 17:41
숙제 풀어보았습니다 :D
<html>
<head>
<script>
function wopen(url, t, w, h) {
var sw;
var sh;
sw = (screen.Width - w) / 2;
sh = (screen.Height - h) / 2;
window.open(url, t, 'Width='+w+'px, Height='+h+'px, Left='+sw+', Top='+sh);
}
</script>
</head>
<body>
<a href="javascript:;" onclick="wopen('http://kr.yahoo.com', '', 640, 480)">야후 팝업</a>
</body>
</html> -
사도
2003.08.18 02:17
클릭안하고 자동으로 팝업창 띄우며 가운데 정렬도 알려주시면 감사하겠습니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 퍼미션을 보기좋게 구하자! [4] | 플로렐라 | 2005.01.03 |
| 나만의 미니홈 만들기 ㅡ delete.php 파일 [2] | 예뜨락 | 2005.01.03 |
| "를 그냥 사용하기 [3] | 추천대화상대 | 2005.01.02 |
IE 에서도 투명 알파값이 적용된 PNG 이미지를 맘껏 활용하자!
[8]
 | THE PAPER™ | 2004.12.27 |
|
나만의 미니홈 만들기 ㅡ메뉴에 게시판 연결
[5]
| 예뜨락 | 2004.12.17 |
| 4. 쿼리문 [6] | 티다 | 2004.12.11 |
| '참조'에 관한 간단한 예제 | 플로렐라 | 2004.12.09 |
| 개판 오분전 라인 그래프 [4] | 미친개 | 2004.12.01 |
| 실명 진위여부 확인 [10] | piasol | 2004.12.01 |
| 나만의 미니홈 만들기 ㅡ write.php 파일과 write_ok [5] | 예뜨락 | 2004.11.30 |
|
나만의 미니홈 만들기 ㅡ view.php 파일과 제목링크
[9]
| 예뜨락 | 2004.11.27 |
|
나만의 미니홈 만들기 ㅡ list.php , 디비 테이블 생성
[6]
| 예뜨락 | 2004.11.26 |
| 나만의 미니홈 만들기 ㅡ 게시판 list.php 파일의 모양새 [6] | 예뜨락 | 2004.11.23 |
|
나만의 미니홈 만들기 ㅡ 게시판의 디자인
| 예뜨락 | 2004.11.22 |
|
나만의 미니홈 만들기 ㅡ 미니홈 생성 페이지
[3]
| 예뜨락 | 2004.11.20 |
|
나만의 미니홈 만들기 ㅡ 기초적인 관리 페이지
[3]
| 예뜨락 | 2004.11.20 |
|
나만의 미니홈 만들기 ㅡ 메인 기초 설계3 .레이아웃
[2]
| 예뜨락 | 2004.11.19 |
| 나만의 미니홈 만들기 ㅡ 메인 기초 설계2 .레이아웃 | 예뜨락 | 2004.11.18 |
|
나만의 미니홈 만들기 ㅡ 메인 기초 설계 .home.php
[12]
| 예뜨락 | 2004.11.17 |
| 나만의 미니홈 만들기 ㅡ 글쓰기에 앞서... [1] | 예뜨락 | 2004.11.17 |