새창 팝업형식으로 띄우는 자바스크립트

새창 띄우는 html소스

 <a href="#" onclick="javascript_:window.open('http://euntori7.tistory.com','pop','menubar=no,status=no,scrollbars=no,resizable=no,width=500,height=300,top=50,left=50');">

 

Window창의 속성

menubar yes/no 메뉴바를 보여주거나 숨김
toolbar yes/no 도구막대를 보여주거나 숨김
directories yes/no 디렉토리바를 보여주거나 숨김
scrollbars yes/no 스크롤바를 보여주거나 숨김
status yes/no 상태표시줄을 보여주거나 숨김
location yes/no 주소표시줄을 보여주거나 숨김
width 픽셀 윈도우의 가로크기를 지정
height 픽셀 윈도우의 높이를 지정
left 픽셀 윈도우의 x축 위치를 지정
top 픽셀 윈도우의 y축 위치를 지정
resizable yes/no 팝업윈도우의 크기를 사용자가 임의로 수정할 수 있는지 여부를 지정
fullscreen yes/no 전체화면 모드로 새창 열림

 

함수로 따로 빼서 만드는 법

function winOpen() {
	window.open("http://euntori7.tistory.com/","new","width=500,height=500,top=100,left=100");
}

 

<a href="#" onclick="winOpen()">500x500사이즈의 새창열기(100x100위치에)</a>

새창 팝업 여러개 띄우기

위의 예제를 약간변형하여 function 한개로 여러 팝업 띄우기

//윈도우 오픈시 필요한 정보
function winOpen(url,title,width,height,top,left){
	window.open(url,title,"width="+width+",height="+height+",top="+top+",left="+left);
}

 

<a href="#" onclick="winOpen('http://euntori7.tistory.com','popup',500,300,50,50);">새창1</a>
<a href="#" onclick="winOpen('http://euntori7.tistory.com','popup',1000,500,100,100);">새창2</a>