window
모든 객체의 최상위 객체이며, 새 창을 생성하는 역할 등을 합니다.
| 메서드 | 설명 | |
| open("경로","창이름","옵션") | 새 창으로 문서를 열 때 사용 | window 객체 생략 가능 |
| alert("문자") | 경고창을 열 때 사용 | |
| prompt("질문","기본응답") | 질문/응답창을 열 때 사용 | |
| confirm("질문") | 확인/취소창을 열 때 사용 | |
| setTimeout(실행문,간격시간) | 해당 간격시간 뒤에 실행문을 한 번만 수행 | |
| setInterval(실행문,간격시간) | 해당 간격으로 실행문을 반복적으로 수행 | |
open 메서드 옵션종류
| 메서드 | |
| width | 새 창의 너비(px, 픽셀 단위) |
| height | 새 창의 높이(px, 픽셀 단위) |
| left | 새 창을 열 때 스크린 기준 좌측 위치(px, 픽셀 단위) |
| top | 새 창을 열 때 스크린 기준 상단 위치(px, 픽셀 단위) |
| scrollbars | 스크롤바의 생성 여부(값은 yes or no) |
| menubar | 메뉴 바의 노출 여부(값은 yes or no) |
| toobar | 도구상자의 노출 여부(값은 yes or no) |
| location | 주소표시줄의 노출 여부(값은 yes or no) |
| status | 상태표시줄의 노출 여부(값은 yes or no) |
| resizeable | 창의 사이즈 조정 가능 여부(값은 yes or no) |
팝업창을 띄우는 경우에는 팝업창으로 보여질 문서가 하나 있어야 합니다.
팝업창을 불러올 문서도 있어야 합니다.
팝업문서 popup.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
button{cursor:pointer;}
</style>
</head>
<body>
<h1>공지사항</h1>
<p>어쩌구저쩌구</p>
<p>어쩌구저쩌구</p>
<p>어쩌구저쩌구</p>
<p>어쩌구저쩌구</p>
<p>어쩌구저쩌구</p>
<p>어쩌구저쩌구</p>
<button onclick="window.close()">창닫기</button>
</body>
</html>
팝업을 불어올 문수 index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function popup(){
window.open("popup.html", "notic" , "width=300px, height=400px, top=100px, left=300px, scrollbars=no, toolbar=no, location=no")
}
</script>
</head>
<body onload="popup()" > <!-- index문서로 열리면 팝업문서를 불러옵니다. -->
<h1>메인페이지</h1>
<h2 onclick="popup()">창열기</h2> <!-- 클릭했을 때 팝업문서를 불러옵니다. -->
</body>
</html>
jQuery로 작성된 예제
팝업창에 띄울 파일 popup.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 반응형 viwport를 삽입 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>청바지</title>
<style>
button{cursor:pointer; }
img{width:100%;}
</style>
<!-- 동작을 구현하기 위한 jquery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<button onclick="window.close()">창닫기</button>
<div class="d-box">
<img src="images/d1.jpg" alt="청바지" width="800">
</div>
</body>
</html>
팝업창을 불러올 파일(파일이름은 자유롭게 사용)
<!doctype html>
<html lang="ko">
<head>
<!-- 환경 설정 -->
<meta charset="utf-8">
<!-- 반응형 viwport를 삽입 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫번째 웹 포폴페이지 </title>
<!-- 외부 스타일 -->
<style>
/* 내부 스타일 */
html,body{
height:100%;
}
</style>
<!-- 동작을 구현하기 위한 jquery 라이브러리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
<script>
$(document).ready(function(){
function popup(){
var w=window.document.body.offsetWidth; /* 창의 너비 */
var h=window.document.body.offsetHeight; /* 창의 높이 */
if(w>800){ /* 창의 너비가 800이상이면 800으로 고정
w=800;
}
window.open("popup.html", "notic" ," width="+w+",height="+h+", top=100px, left=300px, scrollbars=auto, toolbar=no, location=no");
}
$(".p-bt").click(function(){ /* .p-bt를 클릭하면 팝업 창이 나옮 */
popup();
});
popup(); /* 창이 열리면 자동으로 팝업 창이 나옮 */
});
</script>
</head>
<body >
<!-- 실제 브라우저에서 표시할 내용 -->
<div class="con">
<button class="p-bt">
<img src="images/lip3.jpg" alt="립스틱" width="300">
</button>
</div>
</body>
</html>