팝업창 설정(부모창, 자식창, 열기, 닫기)

■ 부모창 → 자식창

 

▶ 부모창에서 자식창(팝업창) 열기

<a href="#LINK" class="right_btn" onclick="javascript:schoolPopup(); return false;">시험장 선택</a>

<script>

    function schoolPopup() {
window.open("/sub/rec/schoolPopup.do", "희망 시험장", "width=700, height=600 top=10, left=10");
}

</script>

 

▷ window.open으로 팝업창을 열 수 있습니다.

기본 세팅 값은 window.open(url, name, option); 입니다.

url : 팝업 주소

name : 팝업창 이름

option: 팝업창 설정

 

팝업창 설정

 

▶ 부모창에서 자식창(팝업창) 닫기

child.close();

 

▶ 부모창에서 자식창(팝업창) 데이터 값 전달하기 (코드는 자식창(팝업창)에 넣어줘야 함)

   ▷ 부모창에서 id가 parent_val인 요소(태그)의 값 가져오기

       - var parent_val = opener.$("#parent_val").val();

   ▷ 자식창(팝업창)에서 id가 child_val인 요소(태그)의 값에 부모창에서 가져온 값 넣기

      - $("#child_val").val(parent_val);

 

부모창에서 자식창에 접근하려면 팝업창을 특정 변수에 담아서 그 변수를 통해 접근하면 된다.

반대로 자식창에서 부모창에 접근하려면 opener를 이용해서 접근을 하면 된다.

 

 

■ 자식창 → 부모창

 

▶ 자식창(팝업창)에서 부모창으로 값 전달하기 (코드는 부모창에 넣어줘야함)

     - var child_val = $("#child_val").val();

        $("#parent_val", opener.document).val(child_val);

 

▶ 자식창에서 부모창 내 함수 호출

   ▷ 자식창(팝업창)에서 부모창에 있는 parenet_func 라는 함수를 호출

        - $(opener.location).attr("href", "javascript:parent_func();");