Author : Guest
Total Views : 41
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.

HTML

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>
    </div>
</div>

CSS

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

<style>
    .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; }
</style>

JavaScript

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
 
    var cookieName = 'HasAccepted';
 
    function setCookie() {
        $.cookie(cookieName, "true", { expires: 2, path: '/' });
        $("#CookiePlaceHolder").slideUp("slow");
    }
 
    $(document).ready(function () {
        var cookieValue = $.cookie(cookieName);
        if (cookieValue == "true") {
            $("#CookiePlaceHolder").css("display", "none");
        }
        else {
            $("#CookiePlaceHolder").css("display", "block");
        }
    });
 
</script>