[TIL] Day 1 : 팝업창

팀 소개 웹페이지를 만드는 프로젝트를 진행중이다.
첫날은 대부분 Todo List 만들었을 때 사용했던 것들이라 새롭게 알게 된 건 별로 없었다.

1.     window.open()

새 창을 열 때, 주로 팝업창을 열 때 사용한다.

window.open("html 주소", "새 창의 이름", "새 창의 옵션")

이름은 그 창의 고유값 같은 것이다. default 는 "_blank" 이다.

옵션은 창의 크기, 위치 등을 결정한다.
예를 들어

"width=520,height=670,left=200,top=100"

처럼 쓰면 된다.

2.     self.close()

새로 창을 열었을 때, 그 창을 닫으려면 이렇게 해주면 된다.
그러면 이 창을 열기 전 원래 창은 어떻게 access 하나?

3.     window.opener

나를 open 해준 opener 라는 뜻이다.
부모창, 자식창의 관계인 것이다.

따라서 팝업창이 활성화된 상태에서 부모창을 새로고침 하려면

    window.opener.location.reload();

이렇게 해야한다.

4.     팝업창이름.document.getElementById("#id").value = "넣어줄 값";

팝업창의 어떤 element에 값을 넣어주거나 바꿔주려면
예를 들어, 아래와 같이 해야한다.

let openWin = window.open(
        "newcard.html",
        "_blank",
        "width=520,height=670,left=200,top=100"
      );
      
//새 창을 열고 수정 전 데이터를 입력창에 표시합니다.
openWin.onload = function () {
        openWin.document.getElementById("image-box").src = memberData["image"];
        openWin.document.getElementById("name").value = memberData["name"];
        openWin.document.getElementById("mbti").value = memberData["mbti"];
        openWin.document.getElementById("blog").value = memberData["blog"];
        openWin.document.getElementById("github").value = memberData["github"];
        openWin.document.getElementById("password").value = memberData["pw"];
};