[CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법

CSS를 사용하여 텍스트 클릭 시 div를 팝업으로 띄우는 방법

가령 “Contact Us”를 클릭하면 문의 폼이 팝업으로 표시되는 등 텍스트 링크를 클릭했을 때 특정 div 영역이 팝업으로 표시되는 효과를 원하는 경우가 종종 있습니다. 이 경우에 사용할 수 있는 스크립트로 다음 stackoverflow에 나와 있는 소스를 소개해드렸습니다.

하지만 위의 방법은 전혀 좋은 방법이 아니라고 Matthew님께서 알려오셨습니다. 대신 Matthew님께서 제안한 다음 CSS 모달(Modal)용 코드를 응용하시기 바랍니다.

항상 좋은 조언을 해 주시는 Matthew님께 감사드립니다. 결과는 이 글을 수정하기 전에 소개했던 것(참고)과 동일합니다.

텍스트 링크를 클릭하면 지정된 div 영역이 Lightbox 팝업 형식으로 표시됩니다.

텍스트 링크를 클릭하면 지정된 div 영역이 모달(Modal) 팝업 형식으로 표시됩니다.

참고로 워드프레스 플러그인, javascript/jQuery 템플릿, PHP 코드 등 각종 코드를 판매하는 Codecanyon에서 메뉴 스타일 등의 CSS 코드나 자바스크립트/jQuery 템플릿을 구입할 수 있습니다.

Codecanyon에서 판매되는 CSS 코드
Codecanyon에서 판매되는 베스트셀링 CSS 코드

워드프레스 팝업 플러그인

그리고 워드프레스 플러그인을 사용하여 컨택트 폼, 구독 폼 등을 띄우는 기능을 구현할 수 있습니다. 무료 플러그인의 경우 대부분 화면일 로드되면서 팝업을 띄우는 기능을 하는 것 같습니다. 유료 플러그인 중에서 텍스트 링크나 이미지 링크를 클릭했을 때 팝업을 띄우는 기능을 제공하는 플러그인이 있을 것 같습니다.

잠깐 검색해보니 ConvertPlug, Layered Popups for WordPress 등의 플러그인이 이런 기능을 제공하네요.

그리고 Ninja Popups for WordPress라는 플러그인도 비슷한 효과를 제공하네요. 플러그인을 사용하면 비교적 만족스러운 효과를 얻을 수 있을 것 같습니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

3개 댓글

    1. 감사합니다.

      stackoverflow에서 사용자들로부터 좋은(?) 평가를 받았다고 다 좋은 코드만 있는 게 아니었군요. 글을 수정하도록 하겠습니다.

    2. 덕분에 이제 CSS로 간단하게 모달 창을 띄울 수가 있겠네요.
      https://jsfiddle.net/mspsys/L5fLrwnh/

      이런 부분에 대해 틈틈이 검색해보아도 제대로 설명된 글을 찾기가 쉽지 않았는데(아마 검색 방향이 잘못되었던 것 같네요. CSS Modal로 해서 검색했어야 하는데...) 좋은 코드를 알려주셔서 너무 감사합니다. (알려주신 코드를 별도의 파일로 저장해놓았습니다. 앞으로 유용하게 사용할 수 있을 것 같습니다.ㅎㅎ)

댓글 남기기

* 이메일 주소는 공개되지 않습니다.