팝업창

팝업 open

<script>
function popup() {
    var width =500;
    var height = 400;
    var left = (window.screen.width/2)-(width/2);
    var top =(window.screen.height/4);

    var windowStatus = 'width='+width+', height='+height+', left='+left+',top='+top+', scrollbars=yes, status=yes, resizable=yes, titlebar=yes';

    const url = "/cart_popup.jsp";

    window.open(url,"hello popup",windowStatus);
}

</script>


<a onclick="popup()">팝업</a>

 

팝업창 close

1. 그냥 닫기 

--> onclick = "window.close()"

 

2. 닫으면서 다른 사이트 이동

--> 아래 script 처럼 if 문 걸기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script type="text/javascript">
	function popup_close() {
		if(window.opener && !window.opener.closed) {
			window.opener.location="/"; 
			window.close();
		}
	}
	
	function popup_close2() {
		if(window.opener && !window.opener.closed) {
			window.opener.location="/cart/list";
			window.close();
		}
	}
</script>

<style>
	* {
		line-height: 30px;
	}
	
	.btn {
		border:2px solid #FEE500;
		color:black;
		text-decoration: none;
		font-size: 13px;
		font-weight: bold;
		padding:5px 15px;
	}
</style>

<table width=90% align=center border=0>
	<tr>
		<td height=20 align=right style="vertical-align:top;">
			<a onclick="window.close()" style="cursor: pointer;"><font size=4 color=#888><b>X</b></font></a>
		</td>
	</tr>
	<tr><td height=20></td></tr>
	<tr>
		<td align=center style="padding-bottom:20px;"><img src="/image/gift2.png" style="width:100px;"></td>
	</tr>
	<tr>
		<td align=center style="padding-bottom: 15px;"><font size=5><b>선물상자에 상품을 담았습니다.</b></font></td>
	</tr>
	<tr>
		<td align=center>
			<a onclick="popup_close()" href="/" class="btn">쇼핑계속하기</a>
			<a onclick="popup_close2()" href="/cart/list" class="btn">선물함 보러가기</a>
		</td>
	</tr>
</table>