Web/front-end
[javascript] 팝업 페이지 자동 사이즈 조정
hjkongkong
2022. 3. 19. 15:15
|
1
2
3
4
5
6
7
8
9
10
|
// 팝업을 호출 할 페이지의 js
function winPopup(popup_num) {
var popUrl = "../" + popup_num;
var popOption = "width=1000, height=1000, status=no, menubar=no, toolbar=no, resizable=yes";
window.open(popUrl, popup_num + " 팝업", popOption);
return false;
}
|
cs |
팝업을 호출 할 페이지의 js
|
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #배경색;
}
img {
border:0;
width:870px;
height: auto;
}
</style>
<script type="text/javascript">
function fnResize() {
self.resizeTo(popupImg.width+20, popupImg.height);
}
</script>
<title>pop up</title>
</head>
<body style="margin:0" onLoad="fnResize();" >
<img id="popupImg" src="../resources/img/popup1.PNG" >
</body>
</html>
|
cs |
팝업의 주소와 매핑되어있는 html 코드(jsp)
리사이즈 된다.
+ img 스타일에서 %가 아닌 특정 값을 주는 이유는, 만일 width:70%으로 하게되면, 팝업 창이 열린상태로 또 팝업 창을 열면 사이즈가 계속 70%씩 작아진다.
100px였던 이미지 : 1회 호출 -> 70px / 2회 호출 -> 49px ....