Manish Pushkar Jha

Full Stack Web Developer
March 1, 2021
4:06 pm

How to create simple alert or disclaimer without any plugin?

46 Views  •  September 18th, 2020  •  1 minute read

Requirement- On open of Pages or Posts at front-end a popup will open with Content, on click of Accept/Close CTA this popup should close and not to be open again on refresh or moving to other pages.

Style:

#cookie-policy {
            color: #fff;
            font-family: inherit;
            background: #003366;
            padding: 20px;
            position: fixed;
            bottom: 10px;
            left: 10px;
            width: 100%;
            max-width: 300px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
            border-radius: 5px;
            margin: 0px;
            visibility: hidden;
            z-index: 1000000;
            box-sizing: border-box
        }
        
        #cookie-policy button {
            color: inherit;
            background: #002851;
            border: 0;
            padding: 10px;
            margin-top: 10px;
            width: 100%;
            cursor: pointer
        }
        
        #cookie-policy button:hover {
            color: inherit;
            background: #000000;
            border: 0;
            padding: 10px;
            margin-top: 10px;
            width: 100%;
            cursor: pointer
        }
        
        @media only screen and (max-width:600px) {
            #cookie-policy {
                max-width: 100%;
                bottom: 0;
                left: 0;
                border-radius: 0
            }
        }

Script:

 function acceptCookie() {
            document.cookie = "cookieaccepted=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/", document.getElementById("cookie-policy").style.visibility = "hidden"
        }
        document.cookie.indexOf("cookieaccepted") < 0 && (document.getElementById("cookie-policy").style.visibility = "visible");

Code: paste this anywhere in body/ before closing body tag

 <p id="cookie-policy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><button onclick="acceptCookie();">Accept Cookies</button></p>