Create a simple cookie policy popup

Last updated on February 12, 2022

Here is a quick and easy way to create a cookie policy popup without using any libraries.

In this tutorial, I only use a bit of jQuery and Bootstrap. But they don’t count, right?! You can adjust the code bellow accordingly if you are not using them.


We have a cookie-overlay class and we hide the popup by default using Bootstrap.

We also have a button to accept the cookies as well as a close button if they don’t want to accept. If they don’t accept it, they will be redirected to accept it again next time they visit the website. You can expand this tutorial if you wish to cover this scenario as well.

<div class="cookie-overlay p-4 d-none">
  <div class="d-flex">
    <div class="mr-3">
      By clicking the "Accept" button below, you agree to our <%= link_to
      'Cookie Policy', cookies_url, target: '_blank' %>.
    <img src="/close.png" class="close-cookies" />
  <button class="btn btn-primary mt-3 accept-cookies">Accept</button>


Next, let’s make the popup look pretty.

.cookie-overlay {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #fff;
  z-index: 2051;
  line-height: 20px;
  font-size: 14px;
  border-radius: 6px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

  > div:first-child {
    width: 458px;

  a {
    text-decoration: underline;

  .close-cookies {
    cursor: pointer;

  @include media-breakpoint-down(md) {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;

    > div:first-child {
      width: auto;

You are welcome to use your creativity here.

Using the styling above will make the popup appear on the bottom left part of the screen on desktop, whilst on mobile, it will cover the entire width of the bottom part of the screen real estate.

The Javascript

Finally, for the most important ingredient in our tutorial.

// cookie policy
$(document).on("ready", function () {
  if (document.cookie.indexOf("accepted_cookies=") < 0) {

  $(".accept-cookies").on("click", function () {
    document.cookie = "accepted_cookies=yes;";

  // expand depending on your needs
  $(".close-cookies").on("click", function () {

Document.cookie lets you read and write cookies associated with your browser. It’s really easy and intuitive to use as shown in the code above.

You can read all cookies using the command document.cookie and you can add a new cookie using document.cookie = newCookie.

A few things to note:

Invite us to your inbox.

Articles, guides and interviews about web development and career progression.

Max 1-2x times per month.