Author : Guest
Total Views : 52
Posted On : Thu, Apr 5, 2018
Updated On : Wed, Apr 11, 2018

Cookie Info Popup using Jquery and HTML

Nowadays most of the website displays the cookie information popup. The cookie is used to store a kind information on the user's browser. In this article, you will learn to create a cookie information popup easily.


Following HTML snippet creates the required placeholders to display the information.

<div class="cookie_header" id="CookiePlaceHolder">
    <span>We use cookies on this site to enhance your user experience</span>
    <a href="#">Find out more about cookies</a>
    <div class="close" id="popup-buttons">
        <button type="button" class="agree-button" style="margin-top:0px !important;" onclick="setCookie();">Accept</button>


Following is the CSS snippet to display the popup on the top of the page.

    .cookie_header { padding: 10px 280px 10px 10px; text-align: center; position: relative; background: #FEBE10; color: #000; position: fixed; width: 100%; box-sizing: border-box; z-index: 999; display: none; }
    .cookie_header .close { color: #FF0000; font-size: 22px; font-weight: bold; position: absolute; right: 10px; bottom: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    .cookie_header a { text-decoration: underline; }
    .cookie_header span { color: black; font-size: 13pt; }


Following javascript is used to store the cookie information, once the user has accepted the cookie policy.

<script src=""></script>
<script src=""></script>
    var cookieName = 'HasAccepted';
    function setCookie() {
        $.cookie(cookieName, "true", { expires: 2, path: '/' });
    $(document).ready(function () {
        var cookieValue = $.cookie(cookieName);
        if (cookieValue == "true") {
            $("#CookiePlaceHolder").css("display", "none");
        else {
            $("#CookiePlaceHolder").css("display", "block");