자바스크립트를 사용하여 팝업창을 원하는 위치에 띄우는 방법을 알아봅니다. 일반적으로 중앙에 팝업창을 많이 띄우므로 아래는 중앙에 정렬 기준으로 팝업창 띄우기를 알아봅니다. ! 잠깐. 팝업창은 어디에 띄우는게 좋을까? # 자바스크립트 팝업창을 띄우는 방법 html 팝업창 띄우는 방법 및 고려할 사항들 바로가기 > 그럼 팝업창을 띄우는 방법은 위 링크를 참고하시구요 다음으로 중앙에 정렬시키기 위한 방법을 알아겠습니다. 팝업창의 중앙 정렬은 가로, 세로 중앙으로 아래의 스크린샷 B에 해당하는 위치입니다. 스크린샷) 팝업처럼 새 창을 띄우는 경우 그 위치를 설정하자! 팝업창을 중앙에 정렬하여 띄우는 방법팝업창을 띄우기 위해서 자바스크립트의 window 객체의 open() 메소드를 사용해야하죠. 이때 open() 메소드의 인자로 팝업의 위치를 설정할 수 있는데 이 값을 조정하면 팝업창의 중앙 정렬하거나 원하는 어느 위치든 이동이 가능합니다. 다음으로 생각할 부분은 위치의 기준이 어디이냐입니다. 팝업창의 위치는 바로 현재 OS화면(윈도우즈 화면)을 기준으로 수치를 고려해야합니다. 즉 중앙 정렬을 위하여 50%의 값에 해당하는 픽셀 값을 알아야 중앙 정렬이 가능합니다. 그렇다면 현재 윈도우 크기의 중앙 위치를 알고 그 값에서 만들려는 팝업창의 크기만큼 다시 반대쪽으로 1/2 만큼 이동시킨다면? 우리가 원하는 정렬이 가능하겠죠. 다시 말해 여기서 필요한 두 가지 값은 바로 다음과 같습니다.
이제 위와 같이 화면의 크기를 구하는 방법을 아래에서 알아봅니다. ! 현재 OS 화면의 좌우 및 상하 크기 얻기 window.screen.width window.screen.height 현재 제 OS 환경에서는 각각 아래와 1920, 1080의 값을 출력하는군요. 그럼 실제 필요한 코드를 작성해봅니다. 만약 가로 세로 각각 200 x 300의 팝업창을 가운데 띄우려는 경우 아래와 같이 작성할 수 있겠습니다. @ 가로 세로 200 x 300 팝업 가운데 띄우기 var popupWidth = 200; var popupX = (window.screen.width / 2) - (popupWidth / 2); var popupY= (window.screen.height / 2) - (popupHeight / 2); 크기를 구했으니 팝업을 띄워야겠죠. window.open('', '', 'status=no, height=' + popupHeight + ', width=' + popupWidth + ', left='+ popupX + ', top='+ popupY); 여기까지 팝업창의 중앙정렬을 위한 방법을 알아보았습니다. @ 팝업이 여러개인 경우? ! 현재 브라우저의 크기를 기준으로 중앙에 띄우는 방법 var popupX = (document.body.offsetWidth / 2) - (200 / 2); var popupY= (window.screen.height / 2) - (300 / 2); window.open('', '', 'status=no, height=300, width=200, left='+ popupX + ', top='+ popupY); 여기서 변수 popupY는 위의 방법과 동일하게 코드를 적용하였습니다. 그 이유는 문서 길이가 긴 경우 중앙정렬시 화면에서 안보이는 문제가 있기 때문에 좌우만 브라우저 크기를 기준으로 하는 것이 유리하기 때문입니다. 이제 위 코드를 실행하면 브라우저에 맞춰 중간에 위치하게 됩니다. ! 팝업창 가운데 띄우는 예제 동작해 보기그럼 이제 아래 버튼을 눌러보세요. 실제로 해당 페이지가 없으므로 빈페이지가 출력되지만 위치가 원하는 중간에 맞게 나타나는지 확인할 수 있습니다. 스크린샷) 팝업처럼 새 창을 띄우는 경우 그 위치를 설정하자 # html 팝업창 띄우는 방법 및 고려할 사항들
바로가기 ! 팝업창을 중앙에 띄우는 방법우선 팝업창을 띄우기 위해서는 자바스크립트의 window 객체의 open() 메소드를 사용한다. open() 메소드의 매개변수로 위치를 설정할 수 있는데 우리는 이 값을 조정해 팝업창의 중앙 정렬이 가능할 수 있다. 하지만 생각 할 부분이 있으니 바로 윈도우를 기준으로 상대 수치가 가능하냐의 점이다. 이 말은 중앙 정렬을 위하여 50% 등의 상대 수치 적용 여부에 따라 간편하게 정렬값을 설정할 수 있는데 아쉽게도 픽셀(px)등의 수치값만 사용이 가능하다. 그렇다면 현재 윈도우 크기의 중앙 위치를 알고 그 값에서 만들려는 팝업창의 크기의 1/2 만큼 이동시킨다면? 우리가 원하는 정렬이 가능할 것이다. 그렇다면 우리가 해당 코드를 작성하기 위해서 알아야하는 요소는? 아래의 값이 필요하다. 1. 현재 윈도우 화면의 크기 # 현재 윈도우 화면의 좌우 및 상하
크기 실제 필요한 코드를 작성해보자. 만약 200 x 300의 팝업창을 가운데 띄우려는 경우 아래와 같이 작성할 수 있다. var popupX = (window.screen.width / 2) - (200 / 2); var popupY= (window.screen.height /2) - (300 / 2); window.open('', '', 'status=no, height=300, width=200, left='+ popupX + ', top='+ popupY + ', screenX='+ popupX + ', screenY= '+ popupY); 여기까지 팝업창의 중앙정렬을 위한 방법을 알아보았다. 팝업창이 하나인 경우 중앙정렬의 방법이 효과적일 수 있으나 만약 2개 이상인 경우는 일반적으로 좌측 또는 우측방향으로 일자로 나열하는 방식이 많이 쓰이는 점을 참고하자. |