728x90
var window = window.open(url, windowName, [windowFeatures]);
→ url
HTML페이지, 이미지 파일 또는 브라우저에서 지원하는 리소스에 대한 경로도나 URL이 될 수 있다.
빈 문자열("")로 지정되면 새 창으로 열린다.
→ windowName (선택항목)
target으로 지정할 경우 <a>, <form>요소의 속성에 대한 대상으로 사용할 수 있다.
이름에는 공백이 없어야 하며, 이 이름이 창 제목으로 사용되지는 않는다.
→ windowFeatures (선택항목)
새로 연 창에 대한 항목의 기능들을(창의 기본 크기 및 위치, 도구 모음 포함 여부 등) 정의한다.
기능은 쉼표로 구분하여, 문자열에는 공백이 없어야 한다.
예:
window.open('/popup.html', 'target', 'top=100, left=300, width=500, height=600, toolbar=no, menubar=no, location=no, status=no, scrollbars=no, resizable=no');
target은 새 탭이 아닌 새 창으로 열도록하고, top과 left는 새 창의 시작 위치, width와 height는 새 창의 크기, toolbar와 menubar는 새 탭 또는 창에 표기되는 툴바와 메뉴바를 표시할 것인지의 여부(no/yes)를 나타낸다.
windowFeatures (no/yes) :
- location : 주소창 표시 (default : yes)
- fullscreen : 전체화면으로 (default : no)
- toolbar : 툴바(단축도구창) 표시 (default : yes)
- menubar : 메뉴바 표시 (default : yes)
- titlebar : 타이틀바 (default : yes)
- status : 상태 표시 줄 표시 (default : no)
- resizable : 창 크기 조정 (default : yes) - tip. 접근성을 위해 이 기능을 항상 사용 가능하도록 설정
- scrollbars : 스크롤바 표시 (default : yes)
MDN 참조 : window.open();
윈도우팝업 제작 및 호출 예제
버튼이 있는 화면 (popTestbtn.html) :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no">
<title>Window Popup Btn</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.btnBox{
margin: 10em 0;
text-align: center;
}
.btn_popup{
border: #555555 solid 1px;
border-radius: 40px;
color: #000000;
padding: 18px 28px;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
.btn_popup:hover{
border: #fdd000 solid 2px;
background-color: #fdd000;
border-radius: 40px;
color: #000000;
padding: 18px 28px;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="btnBox">
<a class="btn_popup" href="javascript:void(0);"
onclick="window.open('../html/common_popup.html', '_blank',
'top=140, left=300, width=500, height=600, menubar=no,
toolbar=no, location=no, directories=no, status=no,
scrollbars=no, copyhistory=no, resizable=no');">
팝업창 호출</a>
</div>
</div>
<!-- <script type="text/javascript">
function openPop(){
var popup = window.open('../html/common_popup.html', '팝업',
'toolbar=no, menubar=no, location=no, directories=no, status=no,
scrollbars=no, copyhistory=no, esizable=yes,
width=600px, height=600px, top=300px left=680px');
};
</script> -->
</body>
</html>
|
cs |
팝업 구현 화면 (popup.html) :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no">
<title>Window Popup</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{padding: 0; margin: 0;}
#pop_container{
font-family: 'NotoSans','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif;
text-align: center;
position: relative;
}
.top {
position: relative;
display: flex;
justify-content: space-between;
padding: 0.5rem 1.4rem;
background-color: #fdd000;
vertical-align: middle;
}
h1.infoTit {
font-size: 20px;
color:#ffffff;
}
main.textBox{
padding-top: 3.4em;
text-align: center;
}
h2.tit{
font-size: 1.6em;
letter-spacing: -2px;
font-weight: bold;
line-height: 1.5em;
}
p {
line-height: 1.8em;
}
p.textContents{
margin: 1.5em 1.8em;
font-size: 1.1em;
font-weight: 200;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #dddddd;
}
footer.btnBox_todayClose {
padding: 0.5rem 0 0.7rem;
display: flex;
justify-content: flex-end;
}
form {padding-right: 2rem;}
input#chkday {
width: 17px;
height: 17px;
vertical-align: middle;
}
label {vertical-align: middle;}
</style>
</head>
<body>
<div id="popup">
<header class="top">
<h1 class="infoTit">안내</h1>
</header>
<main class="textBox">
<h2 class="tit">타이틀</h2>
<p class="textContents">
버튼에 해당하는 상세 내용을 보여주는 영역입니다. <br/>
여기에 공지 및 안내 내용을 입력하세요. 버튼에 해당하는 상세 내용을 보여주는 영역입니다.
여기에 공지 및 안내 내용을 입력하세요. 버튼에 해당하는 상세 내용을 보여주는 영역입니다.
여기에 공지 및 안내 내용을 입력하세요. 버튼에 해당하는 상세 내용을 보여주는 영역입니다.
여기에 공지 및 안내 내용을 입력하세요. 버튼에 해당하는 상세 내용을 보여주는 영역입니다.
<p><strong>적용기간 : 2020.12.01~12.31</strong></p>
<p>- 000일동 올림 -</p>
</p>
</main>
</div>
<footer class="btnBox_todayClose">
<form method="post" action="" name="pop_form">
<span id="check"><input type="checkbox" value="checkbox" name="chkbox" id="chkday"/>
<label for="chkday">오늘 하루동안 보지 않기</label>
</span>
</form>
</footer>
</body>
</html>
|
cs |
결과 출력 - 버튼 클릭시 팝업 오픈 :
반응형
'Web programming > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] Strict mode (0) | 2021.04.10 |
|---|---|
| <script>요소 defer와 async : HTML에서 스크립트 불러오기 (0) | 2021.03.29 |
| jQuery 기본 문법 사용, 선택자와 메서드 (0) | 2020.11.17 |
| jQuery란 (0) | 2020.10.26 |
| JSON, Fetch API, AJAX란 (0) | 2020.05.28 |
