사이트를 만들다보면 급한 공지 사항 등을 전달하기 위해 팝업을 띄워야할 경우가 가끔 생깁니다. 하지만, 현재 XE에서는 이러한 방법은 제공하지 않기 때문에 수작업으로 팝업을 띄워야 하기에 불편한 점이 많아 새롭게 애드온을 만들어봤습니다.

이 팝업 관리 애드온은 새로운 창으로 뜨는 팝업은 지원하지 않고, 동일 페이지 내에서 새로운 레이어에 팝업을 띄우는 방식을 제공합니다. 새로운 창으로 뜨는 방식은 추후에 추가해보도록 하겠습니다.

우선 첨부된 파일을 받아 ./addons/popup 디렉토리에 압축을 푼 다음 관리자 화면에서 필요한 내용을 설정하고 사용하면 되겠습니다.

설정 화면을 보면 쉽게 파악할 수 있겠지만, 설정 가능한 항목들에 대해 살펴보면 다음과 같습니다.

  • 팝업 방식 - 고정 레이어 방식과 모달 레이어 방식을 제공합니다. 고정 레이어 방식은 일반적인 레이어 팝업 형식이며, 모달 레이어 방식은 팝업창 외에는 키보드나 마우스 입력이 되지 않는 형식입니다. 모달 레이어 방식은 IE6에서 오동작할 가능성이 있습니다.
  • 레이어 팝업 위치 - 레이어 팝업을 화면의 어느 위치에 띄울 것인지 설정합니다. (가운데, 왼쪽, 오른쪽 중 선택)
  • 팝업창의 상단 좌표 - 팝업창이 표시될 상단 좌표를 설정합니다. 픽셀 단위로 설정하며 숫자만 입력하시기 바랍니다. (기본값: 100)
  • 팝업창의 측면 좌표 - 팝업창이 표시될 측면 좌표를 설정합니다. 팝업창 위치를 왼쪽으로 설정한 경우에는 왼쪽면 좌표가 되며, 오른쪽으로 설정한 경우에는 오른쪽면 좌표가 됩니다. 가운데로 설정한 경우에는 무시됩니다. 픽셀 단위로 설정하며 숫자만 입력하시기 바랍니다. (기본값: 100)
  • 팝업창의 내부 여백 - 팝업창의 내부 여백을 설정합니다. 픽셀 단위로 설정하며 숫자만 입력하시기 바랍니다. (기본값: 0)
  • 팝업창의 폭 조절 방식 - 팝업창의 폭의 설정을 어떻게 할 것인지 설정합니다. 자동으로 설정한 경우 팝업 내용의 형식이 이미지인 경우 자동으로 조절되며 HTML 파일인 경우에는 400 픽셀로 고정됩니다. (자동, 고정 중 선택)
  • 팝업창의 폭 - 팝업창의 폭을 고정한 경우 팝업창의 폭(width)을 설정합니다. 픽셀 단위로 설정하며 숫자만 입력하시기 바랍니다. (기본값: 400)
  • 팝업 제목 - 팝업의 제목을 설정합니다.
  • 팝업 내용의 형식 - 팝업에 표시될 내용의 형식을 설정합니다. (이미지, HTML 파일 중 선택)
  • 이미지 URL - 팝업 내용의 형식이 이미지일 경우, 팝업에 들어갈 이미지 URL을 설정합니다.
  • 링크 URL - 팝업 내용의 형식이 이미지일 경우, 이미지를 클릭할 때 넘어갈 URL을 설정합니다. 설정하지 않으면 링크는 생략됩니다. 링크 URL이 설정된 경우 클릭하면 새창으로 설정한 URL로 이동합니다.
  • HTML 파일 경로 - 팝업 내용의 형식이 HTML 파일일 경우, 팝업에 들어갈 내용이 담긴 HTML 파일의 경로를 설정합니다. (기본값: ./addons/popup/popup.content.html) 이 파일의 경로는 XE가 설치된 디렉토리를 기준으로 합니다.
  • 팝업 시작 일시 - 팝업을 띄울 시작 일시를 설정합니다. (년월일시분(YmdHi) 형식, 예: 200909231000)
  • 팝업 종료 일시 - 팝업을 띄울 종료 일시를 설정합니다. (년월일시분(YmdHi) 형식, 예: 200909301000)

이 항목들 중에서 팝업 방식과 팝업 위치, 시작 일시와 종료 일시는 반드시 설정해야 합니다. 이 항목들이 설정되지 않으면 동작하지 않습니다. 또한, 당연한 이야기이겠지만 팝업 내용 형식이 이미지인 경우에는 이미지 URL이 설정되어 있어야 합니다. 이 값이 설정되어 있지 않으면 팝업은 동작하지 않습니다.

하나의 애드온을 범용적으로 사용 가능하도록 만들다보니 설정해야 할 것들이 많아 보입니다만, 천천히 살펴보면 그다지 어렵지는 않을 것입니다. 애드온 설정할 때 반드시 모든 항목들을 천천히 읽어보며 설정하시기 바랍니다.

애드온을 설정하고 사이트에 직접 적용하기 전에, 임의의 모듈에서만 동작하도록 애드온을 설정하고 설정한 값들이 제대로 동작하는지 확인한 후에 사이트에 적용하는 것이 좋습니다.

그리고, 팝업창 하단의 창 닫기 버튼 이미지는 ./addons/popup/images/close.gif 파일이니 혹시 이 파일을 원하시는 파일을 변경하고자 하실 때에는 이 파일 이름과 동일하게 만들어 덮어쓰거나 혹은 다른 이름으로 파일을 저장하고 ./addons/popup/popup.addon.php 파일의 71번째 줄을 수정해주면 됩니다.

사용해보시고 혹시 문제점이 있다면 언제든 말씀해주시기 바랍니다. 감사합니다.