지난번에 사용자의 주목을 끄는 웹 UI로 모달을 만들었습니다. 이번에는팝업창을 만드는 방법을 알아보려고 합니다.

모달때에도 설명했지만 모달과 팝업 모두 사용자의 이목을 끌기 위한 UI라고 설명드렸습니다. 다만 모달은 부모 페이지에 조작이 불가능한 반면, 팝업은 팝업창도, 부모 페이지에 대한 조작도 자유로운 점이 있기에 상황에 맞춰 필요한 기능으로 만들어서 사용하시면 됩니다.

---

팝업창 만들기

HTML

index.html

메인 페이지가 되는 index.html입니다.

<button id="openPopUp">팝업 열기</button>

간단하게 버튼 하나로 화면을 구성했습니다.

popup.html

팝업창의 화면인 popup.html입니다.

<p>팝업창입니다.</p>
<a id="closePopUp">[x]</a>

JavaScript

index.js

index.js는 '팝업 열기' 버튼을 눌렀을 때 팝업창이 뜨도록 이벤트를 설정합니다.

const openPopUp = document.getElementById('openPopUp');

openPopUp.addEventListener('click', () =>{
  window.open('./popup.html', 'popup', 'width=300, height=400, left=10, top=20');
});

팝업창이 뜨도록 하는 역할은 window 객체의 open()함수가 수행합니다. open()은 새 브라우저를 띄우는 함수이며 인수들은 모두 선택(optional)입니다.

url에는 우리가 만든 html을 넣어주었고, 자주 사용되는 팝업창과 비슷하게 만들기 위해서 크기와 너비 뜨는 위치를 설정했습니다.

open()함수는 다음과 같이 사용합니다.

open(url, pageName, features)
/*
  url: 창에 띄울 페이지의 주소
  pageName: 띄울 페이지의 이름
  features: 띄울 창의 세부 설정(위치, 너비, 뜨는 위치 등)
*/

popup.js

<a>태그로 만든 [x]버튼이 동작하도록 popup.js에 close()함수를 사용하는 이벤트를 등록했습니다.

const closePopUp = document.getElementById('closePopUp');

closePopUp.addEventListener('click', () => {
  window.close();
});

---