워드프레스에서는 팝업 플러그인을 사용하여 쉽게 모달 팝업을 사이트에 표시할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 페이지 로드 시 모달 팝업을 표시하는 방법에 대하여 살펴보겠습니다.
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.
}
이 블로그에서는 일부 글(워드프레스 관련 글)을 일정 분량 이상 스크롤 하거나 일정 시간 이상 체류하면 네이버 카페 방문 배너가 표시됩니다.
위에 제시된 코드들을 잘 응용하면 페이지 방문 시 일정 시간이 지나면 팝업이 표시되도록 하고, 하루에 한 번만 표시되도록 설정하는 것이 가능합니다. 티스토리 블로그에 이를 응용하여 네이버 카페 팝업이 표시되도록 해보았습니다.

비슷한 방식으로 쿠팡 사이트를 강제로 방문하도록 유도하는 것도 가능하지만 그럴 경우 방문자들에게 거부감이 들어서 이탈률이 높아질 수 있습니다.
네이버 카페 방문 배너는 효과적인 것 같습니다. 이로 인해 네이버 카페 가입 회원들이 제법 늘었습니다.
워프사(워드프레스를 사용하는 사람들) 네이버 카페에서는 워드프레스, 웹호스팅, CSS 등에 대한 다양한 정보를 공유하고 워드프레스 사용자들과 교류할 수 있습니다. 카페를 방문하시면 카페 운영에 도움을 주실 수 있습니다.😄😄😄
마치며
이상으로 자바스크립트를 사용하여 모달 팝업을 표시하는 방법에 대하여 간단히 살펴보았습니다. 상기 예시로 잘 안 되는 경우 구글링하여 다른 코드들로 시도해보시기 바랍니다.
워드프레스를 운영하는 경우 Brave Popup과 같은 플러그인을 사용하면 팝업 노출 수와 클릭 수 등을 확인할 수 있어 팝업의 효과에 대해 판단하는 데 도움이 될 수 있습니다.
"쿠팡 방문하고 계속 읽기" 배너 등을 구현하는 데 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다. 저렴한 비용에 서비스를 제공하고 있습니다.
댓글 남기기