Add GDPR Cookie Policy Consent Popup Modal Box

This blog post describes how to add a GDPR cookie policy consent popup modal box to a website.

Popup Modal Box

I started with the popup box.  I wanted something that appeared above everything else in the bottom left.  This is easily achieved using an element such as a div and CSS such as:

position: fixed;
left: 20px;
bottom: 20px;
z-index: 999999

You may want to give it a black background with some transparency and white text:
background-color: #111;
opacity: 0.9;
color: #fff;

You may also want to add some border-radius and box-shadow.

Within the box you can then add text such as "This website uses cookies" and "By continuing to browse, you are agreeing to our use of cookies as explained in our Cookie Policy."

Button

At the bottom of this box, I added a Close button.  I used JavaScript to handle the OnClientClick event.  This finds the popup box by ID and hides it.

function btnCloseCookiePopup_Click()

{

  document.getElementById('cookiePopupPanel').setAttribute("style", "display:none");

}

Cookie

We don't want the popup to show after the first page visit so I used a cookie to store the fact the user has seen the popup.

In ASP.NET, the code I used to create a cookie is as follows:

Response.Cookies["popup-seen-cookie"].Value = "popup-seen-cookie";

Response.Cookies["popup-seen-cookie"].Expires = DateTime.Now.AddMonths(6);

You then need to show or hide the popup depending on whether or not this cookie is found:

cookiePopupPanel.Visible = (Request.Cookies["popup-seen-cookie"] == null);