본문 바로가기
Servlet&JSP

Step04_Final (popup)

bono.html 2022. 8. 24. 15:00

 

popup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/popup.jsp</title>
</head>
<body>
<h1>팝업 테스트 페이지 입니다.</h1>
<a href="javascript: showPopup();">popup_page.jsp 페이지를 팝업으로 띄우기</a><br/>
<a href="javascript: showPopup2();">popup_page.jsp 페이지를 중앙에 팝업으로 띄우기</a>
<script>
	/*	
	[ 팝업 옵션 문자열 ]
	
	yes나 no로 지정하면 됩니다.
	toolbar = 상단 도구창 출력 여부 
	menubar = 상단 메뉴 출력 여부
	location = 메뉴아이콘 출력 여부
	directories = 제목 표시줄 출력 여부
	status = 하단의 상태바 출력 여부
	scrollbars = 스크롤바 사용 여부
	resizable = 팝업창의 사이즈 변경 가능 여부
	
	사이즈 정의(픽셀 px)
	width = 팝업창의 가로 길이 설정
	height = 팝업창의 세로 길이 설정
	top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)
	left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)
	*/
	
	//팝업 띄우는 함수 
	function showPopup(){
		window.open("popup_page.jsp","팝업창","width=400,height=300,top=100,left=100");
	}
	
	//팝업을 중앙에 띄우는 함수 
	function showPopup2(){
		PopupCenter("popup_page.jsp","팝업창", 800, 500);
	}
	
	//팝업을 중앙에 원하는 페이지를 원하는  크기로 띄우는 함수 
	function PopupCenter(url, title, w, h) {
		// Fixes dual-screen position                         Most browsers      Firefox
		var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
		var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
		
		width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
		height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
		
		var left = ((width / 2) - (w / 2)) + dualScreenLeft;
		var top = ((height / 2) - (h / 2)) + dualScreenTop;
		var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
		
		// Puts focus on the newWindow
		if (window.focus) {
		    newWindow.focus();
		}
	}	
</script>
</body>
</html>

 

popup2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/popup2.jsp</title>
</head>
<body>
<h1>팝업 테스트 페이지 입니다.</h1>
<script>
	/*	
	[ 팝업 옵션 문자열 ]
	
	yes나 no로 지정하면 됩니다.
	toolbar = 상단 도구창 출력 여부 
	menubar = 상단 메뉴 출력 여부
	location = 메뉴아이콘 출력 여부
	directories = 제목 표시줄 출력 여부
	status = 하단의 상태바 출력 여부
	scrollbars = 스크롤바 사용 여부
	resizable = 팝업창의 사이즈 변경 가능 여부
	
	사이즈 정의(픽셀 px)
	width = 팝업창의 가로 길이 설정
	height = 팝업창의 세로 길이 설정
	top = 팝업창이 뜨는 위치(화면 위에서부터의 거리 지정)
	left = 팝업창이 뜨는 위치(화면 왼쪽에서부터의 거리 지정)
	*/
	
	//팝업 띄우는 함수 
	function showPopup(){
		window.open("popup_page2.jsp","팝업창","width=400,height=300,top=100,left=100");
	}
	
	//팝업을 중앙에 띄우는 함수 
	function showPopup2(){
		PopupCenter("popup_page2.jsp","팝업창", 800, 500);
	}
	
	//팝업을 중앙에 원하는 페이지를 원하는  크기로 띄우는 함수 
	function PopupCenter(url, title, w, h) {
		// Fixes dual-screen position                         Most browsers      Firefox
		var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
		var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
		
		width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
		height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
		
		var left = ((width / 2) - (w / 2)) + dualScreenLeft;
		var top = ((height / 2) - (h / 2)) + dualScreenTop;
		var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
		
		// Puts focus on the newWindow
		if (window.focus) {
		    newWindow.focus();
		}
	}	
	
	<%
		//팝업창을 띄울지 여부
		boolean canPopup=true;
		Cookie[] cooks=request.getCookies();
		if(cooks!=null){
			for(Cookie tmp:cooks){
				//canPopup 이라는 키값으로 저장된 쿠키가 존재하면 
				if(tmp.getName().equals("canPopup")){
					//팝업을 띄우지 않도록 한다.
					canPopup=false;
				}
			}
		}
	%>
	
	//페이지 로딩 시점에 팝업을 조건부로 띄우기 
	<%if(canPopup){%>
		showPopup2();	
	<%}%>
	
	//팝업된 창에서 호출할 함수 
	function sendMsg(msg){
		document.querySelector("#result").innerText=msg;
	}
</script>
<p id="result"></p>
</body>
</html>

 

 

popup_page.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/popup_page.jsp</title>
<style>
	body{
		background-color: yellow;
	}
</style>
</head>
<body>
<h3>팝업된 페이지 입니다.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eos eius nemo ducimus quam totam dignissimos qui aperiam distinctio maxime dolore maiores optio ad. Quaerat itaque quod architecto sint voluptatum.</p>
<a href="javascript: self.close();">닫기</a>
</body>
</html>

 

popup_page2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/popup_page2.jsp</title>
<style>
	body{
		background-color: yellow;
	}
</style>
</head>
<body>
<h3>팝업된 페이지 입니다.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eos eius nemo ducimus quam totam dignissimos qui aperiam distinctio maxime dolore maiores optio ad. Quaerat itaque quod architecto sint voluptatum.</p>
<form action="popup_save.jsp" method="post">
	<label>
		<input type="checkbox" name="canPopup" value="no" />
		1 분 동안 팝업 띄우지 않기
	</label>
	<button type="submit">닫기</button>
</form>
<br />
<input type="text" id="msg" placeholder="부모창에 전달할 문자열 입력..."/>
<button id="sendBtn">전달</button>
<script>
	document.querySelector("#sendBtn").addEventListener("click", function(){
		//입력한 문자열을 읽어와서 
		let msg=document.querySelector("#msg").value;
		//부모창의 javascript 함수를 호출하면서 전달한다.
		window.opener.sendMsg(msg);
	});
</script>
</body>
</html>

 

 

popup_save.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test/popup_save.jsp</title>
</head>
<body>
<%
	//"no" 혹은 null 이다 
	String canPopup=request.getParameter("canPopup");
	//만일 팝업을 띄우지 않겠다고 체크박스를 체크를 했다면
	if(canPopup != null){
		//canPopup 이라는 키값으로 no 라는 문자열을 담고 (no라는 문자열을 사용하지는 않는다.)
		Cookie cook=new Cookie("canPopup", canPopup);
		//쿠키 유지 시간을 초단위로 담고 
		cook.setMaxAge(60);
		//쿠키가 응답될수 있도록 HttpServletResponse 객체에 담는다. 
		response.addCookie(cook);
	}
%>
<script>
	//창이 닫아지도록 한다
	self.close();
</script>
</body>
</html>

popup_page2에서 체크가 되어있었다면 canPopup 쿠키가 심어지고 창이 닫아진다.

popup_page2에서 체크가 되어있지 않았다면 창만 닫힌다.

저작자표시

'Servlet&JSP' 카테고리의 다른 글

Step04_Final (cafe)  (0) 2022.08.24
Step04_Final (sql 자료)  (0) 2022.08.24
Step04_Final (users, private) 비밀번호 수정, 회원 탈퇴  (0) 2022.08.24
Step04_Final (UsersDao, UsersDto 자료)  (0) 2022.08.24
Step04_Final (users/private, 가입정보 관리)  (0) 2022.08.23

'Servlet&JSP' Related Articles

티스토리툴바