Time for expired a "cookies" and closing function

Question

I want when I click the "Cookies" button, the message will not show again. When the "cookies" are accepted, they have time to store the device. I need your help. :)

This is a html and js code:

$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(200);
     }, 4000);
    $("#closeCookieConsent, .cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(200);
    });

<div id="cookieConsent">
    <div id="closeCookieConsent">x</div>
    This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a class="cookieConsentOK">I agree!</a>
</div>

Yes, and after click the "Cookies" button, the message will not show again after refresh a page. — Hristian Martinov, Jun 15 '18 at 20:51
So set a cookie.... and read if the cookie is there https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie — epascarello, Jun 15 '18 at 20:57

alex · Answer 1 · 2018-06-15T23:11:58.517

You can put a cookie on the browser of the user and check on the load of the page if the cookie exist like on the code below. When you click the x or on the 'I agree!' link, the message will not show again.

You can reload the page it don't show again.

You have to delete the cookie to see the message again, so i added a button to delete the cookie and reload the page. If you click on "Click for delete cookie", the cookie disapear and message apear.

<!DOCTYPE html>

    <head>
    <title>Stack Overflow</title>
    <body onload="checkBtn()">

    <div id="cookieConsent" style="display:none">
        <div id="closeCookieConsent" onClick=javascript:addBtn();>x</div>
        This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a href="#" onClick=javascript:addBtn(); class="cookieConsentOK">I agree!</a>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id=btnHolder ><input type="button" onClick=javascript:delCookie("btn"); value="Click for delete cookie" /></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    /*$(document).ready(function(){   
    setTimeout(function () {
        $("#cookieConsent").fadeIn(200);
     }, 4000);
    $("#closeCookieConsent, .cookieConsentOK").click(function() {
        $("#cookieConsent").fadeOut(200);
    });*/



    function addBtn(){
        if(getCookie("btn"))
            document.getElementById('cookieConsent').style.display = 'none'; 
        document.getElementById('cookieConsent').style.display = 'none'; 
        setCookie("btn",true,5);
      }
    function checkBtn(){
        if(!getCookie("btn"))
            document.getElementById('cookieConsent').style.display = ''; 
      }
    function setCookie(cname,cvalue,exdays) {
                  var d = new Date();
                  d.setTime(d.getTime() + (exdays*24*60*60*1000));
                  var expires = "expires=" + d.toGMTString();
                  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
              }
    function  getCookie(cname){
                return (document.cookie.match('(^|; )'+ cname +'=([^;]*)')||0)[2]
            }
    function  delCookie(cname) {
            document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
            window.location.reload();
        }

    </script>
    </body>

I comment the jquery part because it gave me an error.

You don't understand me, I want when a button is clicked to create a cookie and the message will not be displayed again. — Hristian Martinov, Jun 15 '18 at 20:54
My code create a cookie and hide the message belong you have the cookie. You have to click on 'i aggree', and you can close and open your browser, the message wîll stay hidden. I added a Buton to suppress the cookie for retry the experiment. — alex, Jun 17 '18 at 19:20

Anshuman Jaiswal · Accepted Answer · 2018-06-16T06:33:52.147

Store cookie and check on page load, if it's there nothing to do.

$(document).ready(function() {
  $('#cookieConsent').hide();
  if(getCookie('cookieAccepted') == null) {
    setTimeout(function () {
      $("#cookieConsent").fadeIn(200);
      }, 4000);
      $("#closeCookieConsent, .cookieConsentOK").click(function() {
        setCookie('cookieAccepted', 'cookieAccepted', 90);
        $("#cookieConsent").fadeOut(200);
      });
    }
});
  
function setCookie(cname, cvalue, exdays, domain) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  var cookieString = cname + "=" + cvalue + ";" + expires + ";path=/;";
  if(domain && domain != '') {
    cookieString += "domain="+domain+";"
  }
  document.cookie = cookieString;
}

function getCookie(cname) {
  var name = cname + "=";
  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);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return null;
}

<div id="cookieConsent">
    <div id="closeCookieConsent">x</div>
    This website is using cookies. <a href="files/c11bg_cookie_policy.pdf" target="_blank">More info</a>. <a class="cookieConsentOK">I agree!</a>
</div>

I tried, but after reloading the page, the message appears again. — Hristian Martinov, Jun 15 '18 at 20:43
@HristianMartinov You will have to hide the HTML initially. Updated the answer. — Anshuman Jaiswal, Jun 16 '18 at 06:33

Time for expired a "cookies" and closing function

2 Answers2