js/jsp/jquery 부모창,자식창 팝업창 띄우기 , 팝업창 닫기 , window.open(), .close()

 

 

window.open을 이용한 기본적인 방법입니당

var popup;

function 함수명(key(있을경우)) {
    console.log("팝업창 열림");

	popup = window.open('팝업창에띄울URL?key=' + value, '사용할name', '추가할 option');
}

 

url : 팝업창에서 보여줄 url, 난 넘겨줄 키가 있어서 넣었는데 없으면 안넣으면 된다

 

name : 팝업창 속성 및 이름 지정 

- _blank : 기본값

- _parent : 부모 프레임에 열립니다.

- _self : 현재 페이지를 대체합니다.

- _top : 로드된 프레임셋을 대체합니다.

- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정합니다. 동일한 이름에 다시 open() 을 하면 기존의 열린창의 내용이 바뀝니다. 다른 이름을 사용하면 또다른 새창이 열립니다.

출처: https://offbyone.tistory.com/312 [쉬고 싶은 개발자:티스토리]

 

 

option : 필요한 설정 지정

features	설명	값	기본값
width	창의 가로 크기, 최소값 100	픽셀단위 숫자
height	창의 세로 크기, 최소값 100	픽셀단위 숫자
top	창의 위치 : 위로 부터 간격	픽셀단위 숫자
left	창의 위치 : 왼쪽으로 부터 간격	픽셀단위 숫자
popup	팝업창 실행 여부 설정	yes / no
noopener	원래(부모)창을 접근할 수 없도록 만듬
noreferrer	Referer헤더를 생략하고 noopener를 true로 설정
IE Only
fullscreen	전체 창 여부 (IE only)	yes / no	no
title	타이틀바 활성화 여부 (IE only)	yes / no	yes
location	주소창 활성화 여부 (IE only)	yes / no	yes
menubar	메뉴바 활성화 여부 (IE only)	yes / no	yes
toolbar	툴바 활성화 여부 (IE only)	yes / no	yes
scrollbars	스크롤바 활성화 여부 (IE only)	yes / no	yes
resizable	창 크기 변경 활성화 여부 (IE only)	yes / no	yes

출처: https://dev-handbook.tistory.com/44 [Developer's Handbook:티스토리]

 

나는 iframe pdf viewer를 사용하는 부모창에서 팝업창 띄우기를 해보려고한다 ! 

 

[내 창에서 잘라온 일부]

이런식으로 왼쪽은 pdf뷰어 , 오른쪽은 에디터로 돼있는 창이 있다

 

 

이 프레임들 밖에 "크게보기" 버튼을 만들고 버튼을 누르면 왼쪽에 있는 pdf 뷰어가 새창으로 열려야한다.

 

 

이렇게 먼저 버튼을 생성

<button type="button" onclick="openPopup('${dataId}');" class="">크게보기</button>

 

 

그리고 위에 써둔 공식처럼 openPopup 이라는 함수를 만들어주었다.

 

/* 팝업 창 생성 */
var popup;

function openPopup(dataId) {
    console.log("팝업창 열림");
    
    popup = window.open('내url?dataId=' + dataId + '&open=y', 'viewer_popup', 'width=1000,height=1000');
  	popupOptionDiv();
}

 파라미터는 각자 상황에 맞게 쓰면 된다

 

**여기서 open=y 를 왜 추가했냐면

+팝업으로 열리는 pdf프레임의 버튼들 옆에 닫기버튼을 만들어주기위해서다.

조건문을 추가해서 open=y일때만 닫기버튼이 생기도록 처리해주었다.

 

그리고 추가할 조건은 

팝업이 열리면 : 부모창 pdf뷰어는 사라지고 에디터창이 커지게

팝업을 닫으면 : 원상복귀

였다

 

그냥 맞는 div의 css확인하고 상황에 맞게 바꿔주면된다

 

/* 팝업창 닫기 (pdf,에디터 원복)*/
function closePopup() {
    console.log('팝업창 닫기');
   
    opener.restore();
    window.close();
}

팝업창 관련 jsp가 있는 부분에 스크립트를 추가했다.

window.close();가 되기전에 opener.restore()로 부모창에서 스크립트 호출하기

 

/*팝업오픈 script*/ 
function popupOptionDiv() {
	$('.left').css('display', 'none');
    $('.right').css('display', 'block');
    $(".edit_wrap").css("display", "block");
    console.log("block");
}

/* 팝업클로즈 script */
function restore() {
	$(".edit_wrap").css("display", "grid");
 	$('.left').css('display', '');
    $('.right').css('display', '');
}

이렇게 해주면 된당