자바스크립트 모달 팝업 (Javascript Modal Popup)

워드프레스에서는 팝업 플러그인을 사용하여 쉽게 모달 팝업을 사이트에 표시할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 페이지 로드 시 모달 팝업을 표시하는 방법에 대하여 살펴보겠습니다.

CSS를 사용하여 Div 요소를 클릭하면 모달 팝업이 표시되도록 하고 싶은 경우 다음 글을 참고해보세요.

자바스크립트 모달 팝업 (Javascript Modal Popup)

구글링해보면 자바스크립트를 사용하여 페이지 로드 시 모달 팝업을 표시하는 다양한 예시를 볼 수 있습니다.

예를 들어, "Creating a modal window on page load"라는 제목의 Stackoverflow 글에서 자바스크리트로 모달 팝업을 표시하는 코드를 적용할 수 있습니다.

HTML:

<div id="modal">
    <div class="modalconent">
         <h1></h1>

        <p>팝업 내용 샬라샬라...</p>
        <button id="button">닫기</button>
    </div>
</div>

Javascript:

window.onload = function () {
    document.getElementById('button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};

CSS:

#modal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.modalconent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
}

페이지 로드 시 곧바로 팝업이 표시되지 않고 얼마 정도 시간이 지난 후에 팝업이 표시되도록 하고 싶은 경우 다음과 같은 자바스크립트 코드를 응용할 수 있습니다(출처: how to hide a div on page load with a 5 second delay).

function delay() {
  window.onload = function() {
    setTimeout(function() {
      document.getElementById("main_sec_2").style.display = "inline-block";
    }, 5000);
  }
}

delay();

또한, 사이트를 방문할 때마다 팝업이 표시되는 것은 재방문 사용자들에게 불편을 끼칠 수 있습니다. 하루에 한 번 혹은 이틀에 한 번만 팝업이나 배너가 표시되도록 하는 것을 고려해볼 수 있습니다.

"Show div once a day"라는 Stackoverflow 문서에 제시된 자스 코드를 활용할 수 있을 것입니다.

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
        document.getElementById('div').style.display = 'block'; //Show the div
        localStorage.last = Date.now(); //Reset your timer
    }
}
else {
    localStorage.last = Date.now();
    document.getElementById('div').style.display = 'block'; //Show the div because you haven't ever shown it before.
}

이 블로그에서는 일부 글(워드프레스 관련 글)을 일정 분량 이상 스크롤 하거나 일정 시간 이상 체류하면 네이버 카페 방문 배너가 표시됩니다.

위에 제시된 코드들을 잘 응용하면 페이지 방문 시 일정 시간이 지나면 팝업이 표시되도록 하고, 하루에 한 번만 표시되도록 설정하는 것이 가능합니다. 티스토리 블로그에 이를 응용하여 네이버 카페 팝업이 표시되도록 해보았습니다.

자바스크립트 모달 팝업 (Javascript Modal Popup)

비슷한 방식으로 쿠팡 사이트를 강제로 방문하도록 유도하는 것도 가능하지만 그럴 경우 방문자들에게 거부감이 들어서 이탈률이 높아질 수 있습니다.

네이버 카페 방문 배너는 효과적인 것 같습니다. 이로 인해 네이버 카페 가입 회원들이 제법 늘었습니다.

워프사(워드프레스를 사용하는 사람들) 네이버 카페에서는 워드프레스, 웹호스팅, CSS 등에 대한 다양한 정보를 공유하고 워드프레스 사용자들과 교류할 수 있습니다. 카페를 방문하시면 카페 운영에 도움을 주실 수 있습니다.😄😄😄

마치며

이상으로 자바스크립트를 사용하여 모달 팝업을 표시하는 방법에 대하여 간단히 살펴보았습니다. 상기 예시로 잘 안 되는 경우 구글링하여 다른 코드들로 시도해보시기 바랍니다.

워드프레스를 운영하는 경우 Brave Popup과 같은 플러그인을 사용하면 팝업 노출 수와 클릭 수 등을 확인할 수 있어 팝업의 효과에 대해 판단하는 데 도움이 될 수 있습니다.

"쿠팡 방문하고 계속 읽기" 배너 등을 구현하는 데 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다. 저렴한 비용에 서비스를 제공하고 있습니다.

참고

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

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다