Cookie Popup With JQuery | Code For Developers

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in browser with jQuery

If you go any website you will notice there is a popup show message with accept cookies. And If you accept once it will not come for a specific time.

Click here to go main code

Before we write code let understand how it works. When you visit a website for the first time and they have an active cookie message. Then it will appear to you and if you click accept then your browser will add value to the storage of its cookies. When you come again to that website the code match with a cookie and prevents that message to come again.

Cookie has expire date and time you can see at the picture below. So after that specific time that cookie notification will come again.

Cookie Popup with jQuery May 30, 2020
Cookie from google

The website collects cookies for a lot of tasks. Sometimes for allow auto-login or show personalize AD.

OK, enough talk let make your hand dirty. 😉

First we need make a Cookies Notice with HTML

index.html
<div class="popup-overlay">
  <div class="popup">
    <p>If you select "close" a cookie will be created for one minute. If "submit" is selected a cookie will be set for 5 minutes. This can be used to remind users that dont sign up to do it, and stop bugging users that do sign up.</p>
    <a href="javascript:;" class="close">Close</a>
    <a href="javascript:;" class="submit">Submit</a>
  </div>
</div>

Add some style with CSS

Style.css
.popup-overlay{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background-color:#ddd;
  width:100%;
  text-align:center;
  padding:1rem;
  
}


a.close,
a.submit{
  display:inline-block;
  color:white;
  background-color:#000;
  padding: 5px 10px;
}

We put display none her because From jQuery we will set display:block if the user does not accept cookies

Now let come to the main part, the jQuery. Put that code on your custom js file and change the expiry time frame.

Custom.js
jQuery(document).ready(function($) {
  
  //check to see if the submited cookie is set, if not check if the popup has been closed, if not then display the popup
  if( getCookie('popupCookie') != 'submited'){ 
    if(getCookie('popupCookie') != 'closed' ){
      $('.popup-overlay').css("display", "block").hide().fadeIn();
    }
  }
  
  $('a.close').click(function(){
    $('.popup-overlay').fadeOut();
    //sets the coookie to one minute if the popup is closed (whole numbers = days)
    setCookie( 'popupCookie', 'closed', .00069444444 );
  });
  
  $('a.submit').click(function(){
    $('.popup-overlay').fadeOut();
    //sets the coookie to five minutes if the popup is submited (whole numbers = days)
    setCookie( 'popupCookie', 'submited', .0034722222 );
  });

  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 "";
  }

  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }
});

That’s all… And at the last, I want to Thanks Alex Kinejara for his code on Codepen

Previous Code

WordPress Ajax Search without plugin [ Easy ]

WordPress Ajax Search without plugin. Fully custom ...

Next Code

Easy ACF repeater Bootstrap accordion in WordPress

FAQ collapse design with ACF repeater Bootstrap ac ...

Leave a Reply

Your email address will not be published. Required fields are marked *

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

WP Plugin Dev

Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle a ...

Animated jQuery Counter Up with the Intersection Observer API

Learn how to create a simple counter animation usi ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple ...

Jquery Replace specific text in all element

...

top