The cookie message will only be displayed once after clicking the submit button

Question

The cookie message will only be displayed once after clicking the submit button

Can someone assist me with setting up a cookies message popup? I want the message to only display once per user click on accept. Here is the code snippet: https://jsfiddle.net/bz8ur3wu/1/

$(document).ready(function(){
    $("button").click(function(){
        $(".cookie").fadeOut();
    });
});

.cookie{width:100%;padding:20px;background:rgb(231, 231, 231);bottom:0;left:0;position:fixed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cookie">
    This website uses cookies. 
    <button>accept</button>
</div>

javascript jquery html css

Answer 1

Answer №1

If you're searching for an alternative approach, consider utilizing the localStorage method. Check for a saved value named cookieconsent and apply a class to the body element if it exists. Otherwise, set the value when the user interacts with the button.

$(document).ready(function(){
    if (!!localStorage.getItem("cookieconsent")) {
        document.body.classList.add("cookieconsent")
    } 
    else {
        $("button").click(function() {
            localStorage.setItem("cookieconsent", "ok")
            $(".cookie").fadeOut();
        });
    }
});

Next, in your CSS, display the .cookie element only if the user has not previously accepted by checking if the body does not have the .cookieconsent class.

.cookie { 
    display: none; }

body:not(.cookieconsent) .cookie {
    display: block;
}

Answer 2

If you're searching for an alternative approach, consider utilizing the localStorage method. Check for a saved value named cookieconsent and apply a class to the body element if it exists. Otherwise, set the value when the user interacts with the button.

$(document).ready(function(){
    if (!!localStorage.getItem("cookieconsent")) {
        document.body.classList.add("cookieconsent")
    } 
    else {
        $("button").click(function() {
            localStorage.setItem("cookieconsent", "ok")
            $(".cookie").fadeOut();
        });
    }
});

Next, in your CSS, display the .cookie element only if the user has not previously accepted by checking if the body does not have the .cookieconsent class.

.cookie { 
    display: none; }

body:not(.cookieconsent) .cookie {
    display: block;
}

Answer 3

Answer №2

I came up with a nifty little script that I now include in all of my projects. It handles the creation of a cookie, checks if it exists or not, and then either shows or hides a specific div with the id #cookie-notice.

I believe this is a solid starting point, and you can customize it as needed.

var myProj = myProj || {}
myProj.cookiePolicy = function (__M) {
    var cookiePolicy = document.querySelector('#cookie-notice'),
        acceptCookieBtn = cookiePolicy.querySelector('#cn-accept-cookie'),
        closeCookiePolicy = cookiePolicy.querySelector('a.close-button');

    closeCookiePolicy.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    document.querySelector('body').addEventListener('click', function (ev) {
        acceptCookie();
    });

    window.addEventListener('scroll', function (ev) {
        acceptCookie();
    });

    acceptCookieBtn.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
        cookiePolicy.classList.add('show');
    }

    function acceptCookie() {
        if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
            cookiePolicy.classList.add('show');
            // set cookie
            var d = new Date();
            d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
            document.cookie = 'cookie_notice_accepted=true' + ';expires=' + d.toGMTString();
        }

        if(cookiePolicy){
            cookiePolicy.parentNode.removeChild(cookiePolicy);
            cookiePolicy = null;
        }
    }
}(myProj);

Answer 4

I came up with a nifty little script that I now include in all of my projects. It handles the creation of a cookie, checks if it exists or not, and then either shows or hides a specific div with the id #cookie-notice.

I believe this is a solid starting point, and you can customize it as needed.

var myProj = myProj || {}
myProj.cookiePolicy = function (__M) {
    var cookiePolicy = document.querySelector('#cookie-notice'),
        acceptCookieBtn = cookiePolicy.querySelector('#cn-accept-cookie'),
        closeCookiePolicy = cookiePolicy.querySelector('a.close-button');

    closeCookiePolicy.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    document.querySelector('body').addEventListener('click', function (ev) {
        acceptCookie();
    });

    window.addEventListener('scroll', function (ev) {
        acceptCookie();
    });

    acceptCookieBtn.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
        cookiePolicy.classList.add('show');
    }

    function acceptCookie() {
        if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
            cookiePolicy.classList.add('show');
            // set cookie
            var d = new Date();
            d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
            document.cookie = 'cookie_notice_accepted=true' + ';expires=' + d.toGMTString();
        }

        if(cookiePolicy){
            cookiePolicy.parentNode.removeChild(cookiePolicy);
            cookiePolicy = null;
        }
    }
}(myProj);

The cookie message will only be displayed once after clicking the submit button

Answer №1

Answer №2

Similar questions

Encountering a mismatched anonymous define() error when using RequireJS in conjunction with Algolia Docsearch

Ensure the left column extends all the way down

When making updates to the HTML code, the cursor unexpectedly moves to the beginning of the code tag

jQuery does not support the addition of new fields in HTML

Positioning an absolute element inside a relative parent with a defined maximum width

Using a function on a singular element

The JQuery loading symbol does not prevent keyboard interactions

Node was experiencing difficulty locating a module alias that had been defined in the tsconfig file and package.json

Step-by-step guide for creating the correct .css for Html.TextBoxFor

Filestack - NoCrop: Utilize whitespace to maintain the square aspect ratio when uploading images without cropping

What steps should I take to design a mobile-friendly navigation bar?

Tracking the referral source when the email box is clicked

Is it allowed to use any AngularJS directives within other directives?

Displaying an error in Ajax caused by PHP

Show text and image side by side on the same row

What is the functionality of Google Chrome's "New Tab" iframes?

Tips for inputting information without redundancy after selecting a specific designation

How to Retrieve Correct JSON Data from Mongoose Query in Node.js

Setting a default value in a multi-select dropdown using react-select

What is the process for implementing THREE.EdgesGeometry on a model imported using THREE.OBJLoader?