첨부파일(이미지) 클릭시 사이즈 조절문제.

Nekena

2026-04-22 (수) 23:21:22 326

기본 뷰스킨 설정이

$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});

이렇게 되어있습니다.
이전에 질문글에 andor님께서 답변을 달아주셧는데

$(function() {
$("a.view_image").click(function() {
// 절대 고정 창
var win_w = 800;
var win_h = 600;

// 중앙 좌표 계산
var win_l = (window.screen.availWidth - win_w) / 2;
var win_t = (window.screen.availHeight - win_h) / 2;

// 팝업 옵션 (location, status 등을 꺼야 창 크기가 정확해집니다)
var settings = "width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no";

var win = window.open(this.href, "large_image", settings);

if (win) {
win.onload = function() {
// 강제 방어 브라우저가 창을 키우지 못하게 다시 한번 800x600으로 리사이즈
win.resizeTo(win_w, win_h);

var doc = win.document;
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background: #000 !important;
overflow: hidden !important;
}
img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* 비율 유지하며 창 안에 가두기 */
}
`;
doc.head.appendChild(style);
};
}
return false;
});
});

또는

$(function() {
$("a.view_image").click(function(e) {
// 기본 동작 차단 (표준 방식)
e.preventDefault();

// 1. 창 크기 및 위치 설정 (화면의 60% 비율)
var ratio = 0.6;
var win_w = screen.availWidth * ratio;
var win_h = screen.availHeight * ratio;

var win_l = (screen.availWidth - win_w) / 2;
var win_t = (screen.availHeight - win_h) / 2;

// 2. 팝업 옵션 보강
// 'popup' 속성은 최신 브라우저에서 새 탭으로 가는 것을 막는 가장 강력한 옵션입니다.
// 보안상 scrollbars는 yes로 두는 것이 팝업 차단을 피하기에 더 유리합니다.
var settings = "popup,width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=yes,scrollbars=yes";

// 3. 팝업 창 열기
var win = window.open(this.href, "large_image", settings);

if (win) {
// 창이 열렸다면 포커스를 줍니다.
win.focus();

win.onload = function() {
var doc = win.document;

// 팝업 내부 이미지가 있는지 확인 후 스타일 적용
var targetImg = doc.getElementsByTagName('img')[0];
if (targetImg) {
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
background: #000 !important;
overflow: hidden !important;
display: flex !important;
align-items: center;
justify-content: center;
}
img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important; /* 이미지 비율 유지하며 꽉 채움 */
cursor: pointer;
}
`;
doc.head.appendChild(style);

// 이미지 클릭 시 창 닫기
targetImg.onclick = function() {
win.close();
};
}
};
} else {
// 팝업이 차단된 경우 안내 (안 보일 수 있음)
alert("팝업 차단 설정을 확인해 주세요.");
}

return false;
});
});

이렇게 팝업강조까지 해주셧는데. 실제 적용시 팝업이 아니라 새탭으로 이동해서 이미지가 뜹니다.
질문게시판을 아무리 찾아봐도 제가 못찾는건지 모르겠습니다만,
혹시 이런 경우 어떤 이유인지 아시는분 계실까요?
브라우저 설정 문제라고 보기에는 andor님께서 예시를 들어주신
https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt
에서 예시 이미지 클릭시에는 정상적으로 팝업이 뜹니다.
view.skin.php 말고 다른 무언가를 건드려야 하는건지...

이미지 팝업 사이즈

답변 3개 / 댓글 23개

채택된 답변

+20 포인트

Poter

첨부파일(이미지) 클릭시 사이즈 조절문제.

답변 3개 / 댓글 23개

답변에 대한 댓글 22개

답변에 대한 댓글 1개

공유하기