해상도에 따라 팝업 창의 크기와 위치를 조정하려면 JavaScript를 사용하여 화면의 해상도를 감지하고, 그에 맞게 window.open 메서드로 팝업 창을 띄울 수 있습니다. 아래는 해상도에 따라 팝업 창의 크기와 위치를 조정하는 예제 코드입니다.
javascript
function openPopup() {
// 현재 화면의 해상도를 가져옵니다.
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
// 팝업 창의 크기를 설정합니다 (예: 화면의 50% 크기로 설정).
var popupWidth = screenWidth * 0.5;
var popupHeight = screenHeight * 0.5;
// 팝업 창의 위치를 화면 중앙으로 설정합니다.
var left = (screenWidth - popupWidth) / 2;
var top = (screenHeight - popupHeight) / 2;
// 팝업 창을 엽니다.
window.open('popup.html', 'PopupWindow', `width=${popupWidth},height=${popupHeight},left=${left},top=${top},resizable=yes,scrollbars=yes`);
}
// 팝업 열기 버튼 클릭 시 호출
document.getElementById('openPopupBtn').addEventListener('click', openPopup);
코드 설명:
window.screen.width와 window.screen.height를 사용하여 화면의 해상도를 가져옵니다.
해상도의 50% 크기로 팝업 창의 너비와 높이를 설정합니다. (필요에 따라 조정할 수 있습니다.)
팝업 창을 화면 중앙에 위치하도록 left와 top을 계산합니다.
window.open 메서드를 사용하여 팝업 창을 열고, 계산된 크기와 위치를 적용합니다.
이 코드를 사용하면 Windows 10과 Windows 11에서 해상도에 맞게 팝업 창이 적절하게 열리게 할 수 있습니다. 필요한 경우 팝업 창의 크기나 위치를 조정할 수 있습니다.
'IT tech Coding > javascript' 카테고리의 다른 글
자바스크립트로 현재날짜 넣는 간단 방법 (0) | 2024.10.22 |
---|---|
자바스크립트로 견적금액 소계, 합계 만들어보자구요~ (0) | 2024.10.17 |
달력의 일자를 균등배분해서 나타내기 (0) | 2024.09.01 |
자동으로 엑셀처럼 행을 추가하는 javascript 코드 연구 (0) | 2024.08.23 |
html2pdf pagebreak 옵션 완벽 정리! 페이지 나누기 문제 해결 꿀팁 (0) | 2024.07.30 |