Popup Window
[ Javascript / Popup Window / Leave Comment ]
1. 팝업 윈도우 예제
1.1 인라인 스크립트
href="주소"를 적어주어 javascript가 무시된 환경에서도 링크가 이용되도록 할 수 있음.
onclick과 onkeypress를 같이 쓰는 것이 더욱 접근성에 좋음. <a href="주소" onclick="window.open(this.href, 'target_name', 'windowproperties'); return false"></a>
windowproperties : width=얼마,height=얼마,scrollbars=yes or no,,,
1.2 함수로 만듦
인라인 스크립트의 예제를 함수로 만듦
javascript.js 파일 내용
//화면 정 가운데로 오도록 변수 삽입.
function popup(url, width, height) {
var width = width;
var height = height;
var left = (screen.width - width) / 2 ;
var top = (screen.height - height) / 2;
var windowproperties = "width="+ height +",height="+ height +",left="+ left +",top="+ top +",scrollbars=0";
window.open(url, "radio", windowproperties); return false;
}
html 내용
<head> 와 </head> 사이에 다음을 삽입.
주소는 javascipt.js가 위치한 주소. <script type="text/javascript" src="http://주소/javascipt.js"></script> 팝업 링크 는 다음처럼 만듦 <a href="주소" onclick="return popup(this.href, '300', '300');" onkeypress="return popup(this.href, '300', '300');">링크 text</a>
접근성을 무시하고 자바스크립트만을 이용한 함수로 만듦
일정한 패턴을 가진 url을 팝업으로 올리고 싶을 때 사용. (예) 게시판
javascript.js 파일 내용
function openwin(id) {
var left = (screen.width - 320) / 2 ;
var top = (screen.height - 370) / 2;
var windowproperties = "width=320,height=370,left="+ left +",top="+ top +",scrollbars=0";
var url = "http://주소"+id;
window.open(url, "radio", windowproperties);
}
html 내용
<head> 와 </head> 사이에 다음을 삽입.
주소는 javascipt.js 가 위치한 주소. <script type="text/javascript" src="http://주소/javascipt.js"></script> 팝업 링크 는 다음처럼 만듦 <a href="javascript:;" onclick="open(id에 해당하는 언어)" onkeypress="open(id에 해당하는 언어)">링크 text</a>
2. 활용
위의 js 함수 예제와 함께 사용함.
2.1 워드프레스 핵 페이지에 펑션 삽입
function openradio() {
if(!is_feed()) // 피드로 내보낼 때는 효과 없으므로 쓰지 않음
echo " onclick=\"return radio(this.href);\" onkeypress=\"return radio(this.href);\" class=\"music\" title=\"listening music!\"";
}
2.2 글 쓸 때
<a href="팝업음악주소"<?php openradio() ?>>음악듣기</a>
3. 관련 링크
Categories : Web