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.

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







You can view this page as reduced HTML version as well.