728x90
반응형
기본 문법
팝업창 띄우기
// 팝업창 띄우기
<script type="text/javascript">
function [함수명]() {
window.open("[팝업을 띄울 파일명 path]", "[별칭]", "[팝업 옵션]");
}
</script>
*window는 생략 가능
팝업창 끄기
//팝업창 끄기
<script>
function closePopup() {
//자신을 실행시킨 본 창은 opener 객체로 인식된다
//value 초기화
opener.document.[Form 이름].[value이름].value = "";
//마우스 커서 옮기기
opener.document.[Form 이름].[value이름].focus();
//자신(팝업)을 종료한다.
self.close();
}
</script>사용 예제
/step16-popup-test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<head>
<meta charset="UTF-8">
<title>POPUP TEST</title>
<script type="text/javascript">
function openPopUp() {
// 함수 동작 테스트
//alert("팝업 테스트");
//window.open("[팝업을 띄울 파일명 path]", "[별칭]", "[팝업 옵션]")
window.open("step17-popup.jsp", "mypopup", "width=450, height=250, top=150, left=200");
}
function showHidden() {
alert(document.testForm.flag.value);
}
</script>
</head>
<body>
<form name="testForm">
<input type="hidden" name="flag" value="fail">
닉네임 <input type="text" name="nickName"><br>
<input type="button" value="팝업창 띄우기" onclick="openPopUp()"><br>
<%--
팝업 실행 후, 팝업을 끄고 나서
'히든값 확인' 버튼을 누르면 ok가 alert되도록 해보기 --%>
<input type="button" value="히든값 확인" onclick="showHidden()">
</form>
</body>
</html>
/step17-popup.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<head>
<meta charset="UTF-8">
<title>팝업창</title>
<script>
function closePopup() {
//함수 동작 테스트
//alert("click");
//자신을 실행시킨 본 창은 opener 객체로 인식된다
var nickNameObj = opener.document.testForm.nickName;
var flagObj = opener.document.testForm.flag;
//nickName 초기화 시키기
nickNameObj.value = "";
//nickName으로 마우스 커서 옮기기
nickNameObj.focus();
// flag를 "ok"로 변경
flagObj.value = "ok";
//자신(팝업)을 종료한다.
self.close();
}
</script>
</head>
<%-- onunload="closePopup()"
: 'x'를 눌러도 '확인'버튼과 동일하게 작동되도록 해줌 --%>
<body bgcolor="yellow" onunload="closePopup()">
팝업창입니다.<br><br>
<input type="button" value="확인" onclick="closePopup()">
</body>
</html>코드 진행 결과
728x90
반응형
'Java Web Programming > 2. JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript 기초 (2) | 2020.08.19 |
|---|
