티스토리, 공감 클릭시 이벤트 만들기

 

  

 

Demo & Code

 

 

[Demo] 티스토리, 공감 클릭시 이벤트 만들기..

 

 

/* Javascript */

document.addEventListener('DOMContentLoaded', function(){
	document.querySelector('div.uoc-icon').addEventListener('click', function(){
      if ( this.getAttribute("class") == 'uoc-icon' ) {
      	setTimeout(() => {
          document.querySelector('.container_postbtn').insertAdjacentHTML("afterbegin", "<div class='thanks' style='width:500px;height:360px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#121212;text-align:center;z-index:9999' onclick='$(this).remove()'><img src='https://t1.daumcdn.net/keditor/emoticon/friends1/large/019.gif' style='width:240px; height:auto; margin-top:60px'></div>")
        }, 200); // 0.2초 뒤에 첫 이미지 로드
        
        setTimeout(() => {
          document.querySelector('div.thanks img').remove()
        }, 2000); // 2초 뒤에 첫 이미지 삭제
        
        setTimeout(() => {
          document.querySelector('div.thanks').insertAdjacentHTML('beforeend', '<img src="https://t1.daumcdn.net/keditor/emoticon/friends1/large/028.gif" style="width:240px; height:auto; margin-top:60px">')
        }, 2400); // 2.4초 뒤에 두번째 이미지 로드
        
        setTimeout(() => {
          document.querySelector('div.thanks').remove()
        }, 5000); // 5초 뒤에 레이어 삭제
      }
  })
})