본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen)

by 이쟝 2022. 2. 10.
  • popup창을 띄우고 widnow객체의 함수로 동작하게 해본다. 

1. popup html 작성

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>pop_up</title>
</head>
	<style>
		body{
			background-image:url(../img/dog3.jpg);
			background-size:100% 400px;
			background-repeat:no-repeat;
		}
	</style>
<body>
</body>
</html>

2. popup을 띄울 main winodw 창

1. 팝업창을 띄우는 <button> 생성

1) HTML 파일

<body>
	<button onClick="popupOpen()">팝업창 띄우기</button>
</body>
</html>

2) js 구현<script>

  • button을 누르면 팝업창이 나타나야 한다. 
<script>
	var newWindow; // 팝업창을 닫아줄 때 변수 필요하기 때문에 전역변수로 생성
	function popupOpen() {
		newWindow = window.open("popup.html", "w", "width=400, height=330, left=50, top=50");
	}
</script>
window.open( "URL(파일명)", "새 창 이름", "새 창 옵션" )  새로운 창(새 탭)을 연다
  • 새창을 표시하려면 window객체의 open( )함수를 생성해서 사용한다. 
  • 파일명을 적을때 만약 폴더가 다른 곳에 있으면 폴더 경로도 적어줘야 한다. 
  • 저기서 "w"는 이름이 아니고 창을 한 개만 띄게 해준다.(창을 재사용) "w"가 없으면 button을 누를때마다 팝업창이 무한대로 생성된다. 
  • 새 창 옵션에는 width, height, left, top, resizeable 등이 있다. 옵션이 여러개이면 콤마로 이어주면 되고, px은 생략가능하다. (resizeable은 창크기 설정하는 옵션인데 크롬, 엣지에서는 적용 불가)
    • width는 새로운 팝업창의 폭이고 height는 새로운 팝업창의 높이이다. 
    • left는 왼쪽에서 몇 px떨어진 건지를 나타내고 top은 위에서 몇 px떨어진 것인지를 나타낸다.

 

left top 50px씩 떨어져있다.&nbsp;

2. 팝업창을 닫아주는 <button> 생성

1) HTML 파일

<body>
	<button onClick="popupClose()">팝업창 닫기</button>
</body>
</html>

2) js 구현<script>

  • button을 누르면 팝업창이 닫아져야 한다.
  • 현재 보고있는 창도 같이 닫아준다. 
<script>
	var newWindow;
	function popupOpen() {
		...
	}
		
	function popupClose() {
		// window.open된 것을 닫아주기
		newWindow.close();
        
		// 현재 창 닫기(현재 페이지)
		self.close(); // window.close();와 동일
	}
</script>

3. 팝업창을 이동하는 <button> 생성

1) HTML 파일

<body>
	<button onClick="popupMove()">팝업창 이동</button>
</body>
</html>

2) js 구현<script>

<script>
   function popupMove() {
		newWindow.moveTo(100,100); // 절대좌표
		newWindow.moveBy(10,10) // 상대좌표 x,y
	}
</script>
moveTo(x,y) 현재 창을 지정한 좌표로 이동( x : left, y : top ), 윈도우를 화면(x,y)에 위치시킨다.
화면의 왼쪽 위 모서리를 기준으로 가로로 x픽셀, 세로로 y픽셀만큼 이동(절대좌표)
moveBy(x,y) 현재 창을 지정한 크기만큼 이동, 윈도우를 화면 현 위치에서 (x,y)만큼 이동시킨다. 
현재 위치를 기준으로 가로로 x픽셀, 세로로 y픽셀만큼 이동(상대좌표)
  • 상대좌표는 x,y 누를 때마다 10픽셀씩 오른쪽 아래로 이동 (0 -10)이면 top으로 이동 (10 0)이면 오른쪽으로 이동

4. 팝업창의 크기를 조절하는 <button> 생성

1) HTML 파일

<body>
	<button onClick="popupResize()">팝업창 크기조절</button>
</body>
</html>

2) js 구현<script>

<script>
	function popupResize() {
		newWindow.resizeTo(200,200);  // 고정
		newWindow.resizeBy(10,10);  // 누를 때마다 폭과 높이가 오른쪽 아래로 10픽셀씩 커짐
	}
</script>
resizeTo(x,y)  브라우저 창의 크기를 조절 (지정한 새 창의 크기를 절대적으로 지정) (절대크기)
resizeBy( )에서는 음수 사용 가능하지만 resizeTo( )함수에서는 음수 값 지정 xx
resizeBy(x,y) 지정한 크기만큼 현재 창 크기 조절(상대적으로 지정) (상대크기)
현재 브라우저 창의 크기를 기준으로 너비와 높이에 값을 더해줌

5. 윈도우 객체의 정보를 화면에 출력

  • 창을 열자마자 윈도우 객체의 정보를 뜨게한다. 그럴려면 onload 이벤트 이용! 그리고 onload를 하면 정보를 나타내줄 <div>가 필요하다!

 

1) HTML 파일

<body onload = "windowInfor()"> <!-- 버튼을 누르지 않고 바로 windowInfor() 실행 --> 
	<button onClick="popupOpen()">팝업창 띄우기</button>
	<button onClick="popupClose()">팝업창 닫기</button>
	<button onClick="popupMove()">팝업창 이동</button>
	<button onClick="popupResize()">팝업창 크기조절</button>
        <br/><div id="windowView"></div>  // windowInfor()를 실행할 곳
</body>

2) js 구현<script>

  • 현재 윈도우가 있는 좌표를 구한다. 좌표 구하기: left(x), top(y)의 위치를 구한다. 
<script>
function windowInfor() {

		var txt = "";
		txt += "window.screenX -> " + window.screenX + "<br/>";
		txt += "window.screenY -> " + window.screenY + "<br/>";
			
		document.querySelector("#windowView").innerHTML =txt;
}
</script>
  screenX   브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리를 나타낸다.
  screenY   브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리를 나타낸다.

 

  • 윈도우의 폭과 높이를 구한다. 
<script>
	function windowInfor() {
		var txt = "";
			
		// 제목과 툴바와 테두리등을 포함해 전체 폭과 높이
		txt += "window.outerWidth -> " + window.outerWidth + "<br/>";
		txt += "window.outerHeight -> " + window.outerHeight + "<br/>";
			
		// 제목과 툴바와 테두리등을 뺀 폭과 높이
		txt += "window.innerWidth -> " + window.innerWidth + "<br/>";
		txt += "winodw.innerHeight -> " + window.innerHeight + "<br/>";
			
		document.querySelector("#windowView").innerHTML = txt;
	}
</script>
  outerHeight    브라우저 창의 바깥 높이(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 넓이와 높이)
  outerWidth    브라우저 창의 바깥 너비(웹 브라우저의 메뉴나 도구 모음 등까지 포함된 넓이와 높이)
 innerHeight  (웹 사이트) 내용 영역의 높이
  innerWidth (웹 사이트) 내용 영역의 넓이

6. 스크린 객체의 정보를 화면에 출력

스크린 객체의 속성

 

screen.width UI 영역을 포함한 화면의 너비
screen.height UI 영역을 포함한 화면의 높이
screen.availWidth UI 영역을 제외한 부분의 너비(작업 표시줄을 제외)
screen.availHeight 화면에서 윈도우의 작업 표시줄이나 메뉴/doc 같은 UI 영역을 제외한 부분의 높이

 

  • 현재 UI 영역을 폿함한 폭과 높이(해상도) 예제는 5번과 같은 파일
<script>
	function windowInfor() {
		var txt = "";
            
		txt += "<hr/><h2>screen객체</h2>";
		
                // 작업표시줄을 포함한 폭과 높이(해상도)
		txt += "screen.width -> " + screen.width + "<br/>";
		txt += "screen.height -> " + screen.height + "<br/>";
		
                //작업표시줄을 제외한 폭과 높이
		txt += "screen.availWidth -> " + screen.availWidth + "<br/>";
		txt += "screen.availHeight -> " + screen.availHeight + "<br/>";
        
		document.querySelector("#windowView").innerHTML = txt;
	}
</script>

screen 객체와 window 객체 속성의 차이점

  • window 객체의 innerWidth, innerHeight, outerWidth, outerHeight 속성은 웹 브라우저 창의 너비나 높이를 측정
  • screen 객체의 availWidth, availHeight, width, height 속성은 화면 자체의 너비나 높이를 측정한다. 
  • 웹 브라우저 창의 크기를 늘리거나 줄인 후 새로고침을 누르면 window 객체의 속성 값은 바뀌지만 screen 객체의 속성값은 바뀌지 않는다. 

새로운 팝업창을 띄울 때 스크린 한 가운데로 할 경우

  • 새로열리는 창(팝업창)의 폭(높이)를 구하고 현재윈도우의 폭(높이)를 구하고 / 새로열리는 창(팝업창)의 너비를 구하고 현재윈도우의 너비를 구한다. 
  • 그 다음에 현재 스크린의 반 - 새로 열리는 창(팝업창)의 반 => x와 y의 값이 나온다. 
  • x와 y의 값이 나오면 moveTo함수를 이용해서 화면에 정중앙에 띄운다. 
<script>
	var newWindow;
	function popupOpen(){
        
		newWindow = window.open("popup.html","w","width=300, height=300, left=50px, top=50px, resizable=no"); 
		
		var x = screen.width/2 - newWindow.outerWidth/2
		var y = screen.height/2 - newWindow.outerHeight/2;
		newWindow.moveTo(x,y);  //화면이 띄어지면 정중앙에 
	}
 </script>

 

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-9. [javascript] window.scroll  (0) 2022.02.10
프론트엔드3-8. [javascript] setInterval과 setTimeout  (0) 2022.02.10
프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델)  (0) 2022.02.09
프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제  (0) 2022.02.09
프론트엔드3-4. JavaScript의 내장객체 String, Math, Array  (0) 2022.02.09

관련글

티스토리툴바