[Javascript] Window popup 기본.

 

빠른 복붙 코드

function detailPopup(uniqId){
	const baseUrl = '<c:url value="" />';
	const param   = new URLSearchParams({uniqId : uniqId});
	const url     = `${baseUrl}?${param.toString()}`;
	const name    = 'detailPopup';
	const options = 'top=10, left=10, width=500, status=no, toolbar=no, resizable=no';
	window.open(url, name, options);
}

 

1. 기본 개념

• window.open() 은 브라우저 자바스크립트 API로, 새로운 브라우저 창(혹은 탭)을 여는 함수.
• JSP는 서버에서 HTML/JS 코드를 생성하는 역할이므로, 팝업을 띄우는 부분은 자바스크립트에서 실행된다

 

2. 기본 문법

window.open(url, windowName, windowFeatures);

 

• url : 열 페이지 경로 (상대/절대 경로 가능)
• windowName : 창 이름 (같은 이름이면 새로 안 열리고 기존 팝업이 재사용됨)
• windowFeatures : 옵션 (위치, 크기, 스크롤, 툴바 등)

window.open('/popup.jsp', 'popupWin', 'width=500,height=400,top=100,left=100,resizable=no,scrollbars=yes');

 

 

 

3. JSP에서 사용하는 예시

<script>
function openUserPopup(userId) {
    const url = '<c:url value="/user/popup.do" />?id=' + encodeURIComponent(userId);
    const name = 'userPopup';
    const options = 'width=500,height=400,top=100,left=100,resizable=no,scrollbars=yes';
    window.open(url, name, options);
}
</script>

<button onclick="openUserPopup('${loginUserId}')">팝업 열기</button>

 

• <c:url> : JSP에서 컨텍스트 경로 자동 추가
• ${loginUserId} : 서버에서 전달한 값
• encodeURIComponent : 특수문자 인코딩

 

4. JSP에서 자주 쓰는 팝업 특징

 * 같은 이름의 팝업 재활용

   1.팝업창 이름을 같게 주면, 매번 새로운 창이 아니라 기존 창이 갱신됨.

   2.GET 파라미터 대신 POST로 데이터 보내려면 form을 만들어 target을 팝업으로 설정.POST 방식 데이터 전달

<form name="popupForm" method="post" target="popupWin" action="<c:url value='/popup.do'/>">
    <input type="hidden" name="userId" value="${loginUserId}">
</form>

<script>
function openPostPopup() {
    window.open('', 'popupWin', 'width=500,height=400');
    document.popupForm.submit();
}
</script>

 

팝업 닫기

• 팝업 페이지에서 window.close(); 사용.
• 부모창 함수 호출 : opener.someFunction();

 

6. 팝업 → 부모창 데이터 전달 예시

// 팝업 페이지
function selectValue(value) {
    opener.document.getElementById('targetInput').value = value;
    window.close();
}

 

<!-- 부모 페이지 -->
<input type="text" id="targetInput">
<button onclick="window.open('/popup.jsp', 'popupWin', 'width=500,height=400')">값 선택</button>