[DOM] JavaScript로 팝업 창 열기와 닫기

팝업 창 열기

먼저 JavaScript 를 사용하여 새로운 창을 열어보겠습니다. 아래 코드는 버튼을 클릭했을 때 "notice.html" 파일을 doit 라는 이름으로 새로운 창으로 엽니다.

function openWin() {
    let opt = "width=400,height=350"; // 새 창 크기
    myWin = window.open("notice.html", "doit", opt);
}

함수 openWin 에서 window.open 함수를 사용해서 새로운 창을 열어 notice.html 파일을 띄우고 창의 이름은 doit로 정의하며 크기를 조절합니다.

팝업 창 닫기

다음으로 열린 팝업 창을 닫는 함수를 만들겠습니다.

function closeWin() {
    myWin.close(); // 열린 팝업 창 닫기
}

함수 closeWin 에서 myWin.close()를 호출하여 열려있는 팝업 창 을 닫습니다.

 

HTML 코드에서는 두개을 버튼을 만들어 팝업창 열기 와 팝업 창 닫기 동작을 제어할 수 있습니다.

<div id="container">
    <button onclick="openWin()">팝업 창 열기</button>
    <button onclick="closeWin()">팝업 창 닫기</button>
</div>

이러한 방식으로  JavaScript를 사용하여 팝업창을 열고 닫을 수 있으며 웹 애플리케이션에서 다양한 상호작용을 구현할 수 있습니다.