홈페이지에 팝업을 표시하려는 경우 CSS나 자바스크립트/jQuery를 이용한 다양한 팝업 플러그인을 구글에서 검색할 수 있습니다.
간단한 모달 팝업의 경우 다음 W3Schoools 문서에서 제시하는 방법을 이용할 수 있습니다.
제시된 코드를 사용하면 다음과 같은 모달 팝업을 띄울 수 있습니다.
CSS로만 팝업을 띄우고 싶다면 다음 글을 참고해보시기 바랍니다.
이외에 구글을 검색해보면 다양한 무료 팝업 플러그인을 찾을 수 있습니다.
무료 팝업으로 디자인적인 측면이나 기능적인 측면의 완성도를 높이는 데 어려움을 겪는 경우 Codecanyon에서 판매하는 플러그인을 활용해볼 수 있습니다.
Layered Popups - Standalone Popup Script (독립적으로 작동하는 팝업 스크립트)
Layered Popups는 원하는 콘텐츠로 다중 레이어를 생성하고 각 레이어에 대하여 맞춤형 전환(transition)/애니메이션을 추가할 수 있는 플러그인입니다. 이 플러그인은 "멀티레이어 팝업 PHP 스크립트 - Layered Popups"를 참고해보세요.
Smart Animated Popup - jQuery Popups Plugin (제이쿼리 팝업 플러그인)
Smart Animated Popup은 일반적인 팝업이나 모달 팝업을 생성하는 데 사용되는 jQuery 플러그인으로 위치 지정, 팝업 열기/닫기 애니메이션 효과, 오버레이, 팝업 모양 등을 사용자 지정할 수 있고 많은 설정이 제공됩니다. 반응형으로 작동합니다.
이 플러그인에는 팝업 열기/닫기, 스타일 지정, 애니메이션 효과 지정 등을 위한 많은 설정이 포함되어 있습니다.
중요한 특징:
- 반응형 팝업
- 접근성(Accessibility) 지원
- 25가지 트랜지션(전환) 및 애니메이션 효과
- 4가지 팝업 스타일
- 모달 오버레이 제어
- 모달 팝업 지원
- 팝업 위치 수정
- 팝업 헤더 및 푸터
이 플러그인은 최신 안드로이드(메이저 버전 4, 5, 6, 7 ) 브라우저, 아이폰(iPhone) 및 아이패드(iPad) 사파리와 크롬(iOS 8, 9, 10 ), 모던한 모든 브라우저( IE9에서는 애니메이션을 표시하지 않음)에서 테스트되었습니다. IE8 이하, Windows 5용 Safari는 지원되지 않습니다. 팝업이 작동하려면 자바스크립트(JavaScript)와 제이쿼리(jQuery)가 지원되어야 합니다. 또한, 애니메이션이 작동하려면 브라우저에서 CSS3 애니메이션과 트랜지션을 완전히 지원해야 합니다.
자세한 내용과 데모는 Smart Animated Popup 플러그인 페이지를 참고해보시기 바랍니다.
Simple Subscription Popup-jQuery Email Signup Form (심플한 구독 팝업-jQuery 이메일 가입 양식)
Simple Signup Form jQuery Plugin은 방문자의 이메일 주소를 효과적인 방법으로 수정하는 제이쿼리 플러그인입니다. 이 플러그인에는 많은 사용자 정의(커스터마이제이션) 옵션이 탑재되어 있고 몇 분만에 간단하게 설정이 가능합니다.
자세한 내용은 Simple Signup Form jQuery Plugin 페이지를 방문해보시기 바랍니다.
마치며
팝업창을 만드는 다양한 무료 소스를 인터넷에서 다운로드하여 활용할 수 있습니다. 시간과 노력을 아끼려는 경우 유료 플러그인을 활용해볼 수 있을 것입니다.
워드프레스(WordPress)의 경우 기능이 풍부한 무료 플러그인을 사용할 수 있습니다.
워드프레스에서 이메일 마케팅을 실시하려는 경우 다음 글을 참고해보시기 바랍니다.