브라우저 제목

예제 샘플 보기

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>

제목 날짜
window 객체 Popup창 띄우기 2017.10.10
태그 목록