FrontEnd/JavaScript & jQuery
JavaScript :: 부모창 > 자식창(팝업창) > 부모창
초록 (green)
2016. 5. 10. 00:52
회원 가입을 받는 경우, 페이지 전체를 차지하는 큰 창이 아닌 조그마한 팝업 창을 띄워 받는 경우가 있다.
부모창(리스트)과 자식창(팝업창) 페이지 둘 다 자바스크립트를 걸어줘야 한다.
1. 부모창 페이지 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<html>
<head>
<script type="text/javascript">
function insertPopup() {
// window.name = "부모창 이름";
window.name = "MemberServlet.do";
// window.open("자식창 이름", "불러올 자식 창의 닉네임", "팝업창 옵션");
window.open("memberInsert_form.html", "insert",
"width = 450, height = 320, resizable = no, scrollbars = no, status = no");
}
</script>
</head>
<body>
// 회원가입에 링크를 걸어 팝업창을 띄운다.
<a href="javascript:insertPopup();">[회원가입]</a><br>
</body>
</html> |
cs |
부모창에서 회원가입 링크를 누르면 이렇게 회원가입 페이지가 팝업 창으로 뜬다.
2. 자식창 페이지 소스
회원가입 항목을 전부 입력한 뒤 확인 버튼을 누르면 창이 닫히면서 리스트에 회원 명단이 자동으로 추가되어야 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
<html>
<head>
<script type="text/javascript">
// 자동으로 팝업 창이 닫히게 하는 함수
function popupClose(form) {
// form의 target을 부모 창으로 설정함
form.target = opener.name;
form.submit();
if (opener != null) {
opener.insert = null;
self.close();
}
}
</script>
</head>
<body>
<form method="post" name="writeform" action="memberInsert_pro.jsp" target="MemberServlet.do">
<input type="submit" value="확인" onclick="window.close()" >
<input type="button" value="창 닫기" onclick="window.close()">
</form>
</body>
</html> |
cs |
자바스크립트 함수에서 target을 부모 창으로 설정한 뒤 form에도 target으로 부모 창을 적어줘야 한다.
원래는 submit에 onclick을 설정하지 않아도 self.close();만으로 닫혀야 하는데,
창이 닫히지 않아서 onclick에 window.close();로 이벤트를 줬다.