[JavaScript] 팝업 창 구현 - window.open

[JavaScript] 팝업 창 구현 - window.open

프로젝트에서 기획 명세를 바탕으로 독립된 팝업 창을 구현해야 했다.

JavaScript의 window.open 메서드를 사용하여 팝업창을 구현하였다.

 

window.open 메서드

새 브라우저 창이나 탭을 열 때 사용하는 메서드

window.open(url, windowName, [windowFeatures]);

- url : 팝업 창에 로드할 페이지 URL

- windowName :  팝업 창의 이름. 같은 이름을 가진 창이 이미 열려있다면 해당 창을 재사용.

- windowFeatures : 팝업 창의 특성을 정의하는 문자열.

 

코드 예시

<button onClick="openPopup()">약관 보기</button>

<script>
  function openPopup() {
    window.open(
      '/signup/terms',
      'popup',
      'toolbar=no,scrollbars=no,resizable=yes,status=no,menubar=no,width=600,height=700,top=0,left=0'
    );
  }
</script>

 

Reference

Window: open() method - Web APIs | MDN

 

Window - Web APIs | MDN