How to create simple alert or disclaimer without any plugin?

Date: September 18th, 2020
Category: Blog | Questions, 59 Views

Asked by: Various, Location: Various

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>
Share my post: 

Leave a Reply

Your email address will not be published. Required fields are marked *