Register cookie after pressing button

Question

Hi!

I’m trying to create a pop up div that will show the latest video from my Youtube channel when a user browse the site, however, there are some conditions:

1. It should continue to appear on other pages until the user clicks the OK or Quit button. (Like a cookie pop up that doesn’t fade until Ok)
2. It should appear to the user again in a few days.

The code I found on the internet solved point 2 of my condition and is working well, however, point 1 was still open.

I need this because there are some pages that the pop up will not appear, and if the cookie is registered without the condition of clicking the OK or Quit buttons, on the next pages of the user’s navigation flow the div will not be displayed correctly.

// Define cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (encodeURIComponent(value) || "")  + expires + "; path=/";
};

// Obtêm cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)===' '){ c = c.substring(1,c.length); }
        if (c.indexOf(nameEQ) === 0){ return decodeURIComponent(c.substring(nameEQ.length,c.length)); }
    }
    return null;
};

// Apaga cookie
function eraseCookie(name) {
    document.cookie = name+'=; Max-Age=-99999999;'; 
};

// Exibe div uma única vez
function cspCheck(){

    // Obtêmos a div #custom-social-proof
    var csp = document.getElementById('alerta-card')

    // Escondemos a div #custom-social-proof ao chamar a função cspCheck()
    csp.style.display = "none";

    // Se tiver um cookie definido / se a div já foi exibida uma vez
    if(getCookie('csp')){

        // Escondemos a div
        csp.style.display = "none";

    // Se NÃO tiver um cookie definido / se a div nunca foi exibida
    } else {

        // Exibimos a div
        csp.style.display = "block";

        // Definimos um prazo em dias para o cookie ser deletado (para div voltar à aparecer)
        var cookiesExpireIn = 3; // dia(s)

        // Definimos o cookie indicando que a div já foi exibida uma vez
        setCookie('csp','1',cookiesExpireIn);

    }

}

// Chamamos a função ao carregar a página
window.onload = function() {
    cspCheck();
};

Can someone help me?

Answer 1

well first you should select the button that closes the pop up and add a click Event on it and when the user click you call the Function that set the cookie. I hope I’ve helped!!!

EXAMPLE

var button = document.querySelector('.close-pop-up');

button.addEventListener('click', () => {
  
  alert('fechei pop up e set cookie')
  // chama a function que set o cookie ....
});

.pop-up {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 15px 0;
  width: 100%;
  height: 130px;
  background: #23212d;
}

.pop-up h1 {
   text-align: center;
  color: #fff;
}

.pop-up button {
  width: 100px;
  text-align: center;
  color: #fff;
  border: none;
  padding: 6px 11px;
  border-radius: 5px;
  background: #96f;
  cursor: pointer;
}

<div class="pop-up">
    
  <h1>Pop Up</h1>
  <button class="close-pop-up">
    fecha pop up
  </button>
</div>