2021-09-04
화면 이동이 아닌 현재 화면에서의 팝업창을 띄워야 하는 경우가 생길 수 있다. 간단한 공지사항이나 이벤트 정보의 경우 팝업창으로 보여주면 아무래도 사용자의 집중과 관심을 유도할 수 있다. 오늘은 이러한 방법을 자바스크립트를 통해서 구현하는 방법을 알아보자.
- 예제
우선 방법은 a 태그를 클릭하면 팝업창이 뜨는 방식으로 구현할 것이다. 단순 팝업창만 띄울거기 때문에 컨트롤러 로직 및 차후 파라미터를 서로 forward 하는 방법까지는 다루지 않는다.
우선 아래는 구체적인 함수구현 부분이다. 크게 어려운 것은 없으며, 창 크기 및 창을 띄울 위치 이외의 window 속성을 지정하고 마지막으로 window.open을 통해 자신이 팝업으로 띄우고 싶은 url 맵핑 정보 이름 window 속성을 넣어주면 마무리된다.
<script type="text/javascript">
function showPopUp() {
//창 크기 지정
var width = 500;
var height = 500;
//pc화면기준 가운데 정렬
var left = (window.screen.width / 2) - (width/2);
var top = (window.screen.height / 4);
//윈도우 속성 지정
var windowStatus = 'width='+width+', height='+height+', left='+left+', top='+top+', scrollbars=yes, status=yes, resizable=yes, titlebar=yes';
//연결하고싶은url
const url = "https://seeminglyjs.tistory.com/";
//등록된 url 및 window 속성 기준으로 팝업창을 연다.
window.open(url, "hello popup", windowStatus);
}
</script>
이후 아래와 같이 a 태그를 이용하여 팝업창을 띄우면 된다.
<div>
<a href="javascript:showPopUp()">링크</a>
</div>
아마 url 정보를 안 바꾸고 html 파일에 위의 코드와 똑같은 정보를 복붙 하고 실행하면 아래와 같이 정상적으로 해당 블로그로 이동하는 것을 확인할 수 있다.
- 기타
추가적으로 windowStatus의 내용들은 이름에서 느껴지는 그대로이며 뜻은 이러하다. 참고만 하면 된다.
(브라우저에 따라 지원 안 할 수 도 있다.)
scrollbars=yes -> 팝업창에서의 스크롤을 사용하겠다.
status=yes -> 상태 표시줄의 내용 지정
resizable=yes -> 팝업창 크기 조정 가능 여부
titlebar=yes -> 타이틀바를 보여줄지 여부
메인 이미지 출처: Photo by Sergey Sokolov on Unsplash