Cookie Popup with Javascript without any dependencies

Created: 21.03.2018 | Updated: 25.05.2018

How to create a Cookie popup with Javascript without any dependencies.

This simple code shows a popup at the bottom of your webpage. This is usually used to inform visitors that you are using cookies on the page.

It has no dependencies and requires just this script. No external downloads, no jQuery, no nothing ;)

<div id="cookiepopup">
Your text over here.
<span id="cookiepopupspan" onclick="document.cookie='hidecookiepopup=1;path=/';document.getElementById('cookiepopup').style.display='none';">
OK Button
</span>
</div>

<script>
if (document.cookie.indexOf('hidecookiepopup') != -1 ) {
   document.getElementById(\'cookiepopup\').style.display='none';
} else {
   document.getElementById('cookiepopup').style.display='block';
}
</script>

And here the example CSS used:

#cookiepopup {
   position: fixed;
   bottom: 0;
   right: 0;
   left: 0;
   text-align: center;
   font-size: small;
   border: 1px solid #a0a0a0;
   background-color: rgba(100,100,100,0.75);
   padding: 0.5rem;
   color: #ffffff;
   display: none; 
}