이온디
호스팅센터
웹디벨로퍼
프리랜서카페
스레드

XE타운에서 XE팝업 혹은 즐겨찾기 유도 팝업 질문글이 있어 좀 찾아봤습니다.

https://xetown.com/questions/1602828#comment_1605127


XE 애드온으로 이런 게 있는데, 이런걸 수정해서 사용하면 어떨까 싶습니다.


그 밖에 위젯으로 이렇게 팝업형식으로 만들 수도 있습니다.

https://eond.com/shop/395178?category=404916




https://xe1.xpressengine.com/index.php?mid=download&package_id=18334979


사이트를 만들다보면 급한 공지 사항 등을 전달하기 위해 팝업을 띄워야할 경우가 가끔 생깁니다. 하지만, 현재 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번째 줄을 수정해주면 됩니다.


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


popup.zip

 


내용을 입력하세요
0
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기