[JavaScript] 자바스크립트를 이용한 팝업창 띄우기

2021-09-04

---

화면 이동이 아닌 현재 화면에서의 팝업창을 띄워야 하는 경우가 생길 수 있다. 간단한 공지사항이나 이벤트 정보의 경우 팝업창으로 보여주면 아무래도 사용자의 집중과 관심을 유도할 수 있다. 오늘은 이러한 방법을 자바스크립트를 통해서 구현하는 방법을 알아보자.

---

- 예제

 

우선 방법은 a 태그를 클릭하면 팝업창이 뜨는 방식으로 구현할 것이다. 단순 팝업창만 띄울거기 때문에 컨트롤러 로직 및 차후 파라미터를 서로 forward 하는 방법까지는 다루지 않는다.

 

우선 아래는 구체적인 함수구현 부분이다. 크게 어려운 것은 없으며, 창 크기 및 창을 띄울 위치 이외의 window 속성을 지정하고 마지막으로 window.open을 통해 자신이 팝업으로 띄우고 싶은 url 맵핑 정보 이름 window 속성을 넣어주면 마무리된다.

<script type="text/javascript">
function showPopUp() {
	
	//창 크기 지정
	var width = 500;
	var height = 500;
	
	//pc화면기준 가운데 정렬
	var left = (window.screen.width / 2) - (width/2);
	var top = (window.screen.height / 4);
	
    	//윈도우 속성 지정
	var windowStatus = 'width='+width+', height='+height+', left='+left+', top='+top+', scrollbars=yes, status=yes, resizable=yes, titlebar=yes';
	
    	//연결하고싶은url
    	const url = "https://seeminglyjs.tistory.com/";

	//등록된 url 및 window 속성 기준으로 팝업창을 연다.
	window.open(url, "hello popup", windowStatus);
}
</script>

 

이후 아래와 같이 a 태그를 이용하여 팝업창을 띄우면 된다.

 

  <div>
      <a href="javascript:showPopUp()">링크</a>
  </div>

 

아마 url 정보를 안 바꾸고 html 파일에 위의 코드와 똑같은 정보를 복붙 하고 실행하면 아래와 같이 정상적으로 해당 블로그로 이동하는 것을 확인할 수 있다.

 

---

- 기타

 

추가적으로 windowStatus의 내용들은 이름에서 느껴지는 그대로이며 뜻은 이러하다.  참고만 하면 된다. 

(브라우저에 따라 지원 안 할 수 도 있다.)

 

scrollbars=yes -> 팝업창에서의 스크롤을 사용하겠다.

status=yes -> 상태 표시줄의 내용 지정

resizable=yes -> 팝업창 크기 조정 가능 여부

titlebar=yes -> 타이틀바를 보여줄지 여부 

---

메인 이미지 출처: Photo by Sergey Sokolov on Unsplash