Cookie Popup with Javascript without any dependencies

Created: | Updated:

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

Cookie Popup with Javascript without any dependencies • Russwurm

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