고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
팝업창을 사용하여 어떤 정보를 표출할 때, 해당 팝업창에서 사용자 입력 등의 특정 작업이 끝나기 전에 다른 창으로 이동을 막고 싶은 경우가 있습니다. 예를들어 온라인으로 시험을 본다거나, 퀴즈를 푸는데 다른 브라우저를 띄워 검색하는것을 막고 싶은 경우 등입니다.
윈도우가 포커스를 잃을때를 잡으면 됩니다
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>
</title>
<script language = "javascript">
function ShowTestRoom()
{
window.open("./testpage.html", 'TEST', 'height=700,width=1000,top=0,left=0, fullscreen=yes');
}
</script>
</head>
<body>
<input type = "button" value = " 창 띄우기 " onClick = "javascript:ShowTestRoom()">
</body>
</html>
우선, 위와 같이 [창 띄우기] 라는 페이지를 만들고, 버튼 클릭시 새로운 창이 뜨게 만들었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body allowfullscreen>
<h1>
본 페이지는 포커스를 잃게되면 자동으로 닫힙니다
</h1>
<script>
$(window).on("blur", function () {
self.close();
});
</script>
</body>
</html>
팝업내에 보여지는 페이지에는 위와 같이 window의 onblur 이벤트에 윈도우를 닫는 코드를 넣어두면 됩니다.
만약, 윈도우를 이동하거나 다른 창을 띄우거나 할때 바로 close 하지 않고, 경고메시지를 뿌려주려면 onblur 이벤트 내에서 alert() 등을 한 후에 close 유무를 정하면 되겠습니다.
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| javascript 이미지 크기조정, 사진크기변경 ... 실제크기를 변경하는 리사이징 (8) | 2019.09.03 |
|---|---|
| 특수키차단, 복사금지, 컨트롤키방지, Alt키 차단하기 (0) | 2019.08.16 |
| javascript 순서대로 실행시키기, jquery 효과, 애니메이션 실행순서 차례로.... Callback 함수 (0) | 2019.08.05 |
| 웹사이트 출력 이벤트 잡아서 처리하기, 특정 DIV 내용만 출력하기 ... 웹페이지 인쇄이벤트, 출력이벤트, 웹사이트 프린트이벤트 (0) | 2019.07.31 |
| window load / document ready , 페이지의 모든 요소가 로딩된 후에 특정 javascript 실행하기 (이미지로딩/동영상로딩/페이지로딩 등등) (0) | 2019.06.14 |
댓글 영역