
Simple Cookie Consent Popup Widget
"Simple cookie consent popup widget modal (popup) window that appears on a website when a user first visits."

Details
Simple cookie consent popup widget modal (popup) window that appears on a website when a user first visits. It informs the user that the website uses cookies (small data files stored on the user's device) for purposes like tracking, analytics, or personalizing content. It usually asks for the user's permission to store cookies on their device in accordance with privacy laws and regulations like the General Data Protection Regulation (GDPR) or California Consumer Privacy Act (CCPA).
This widget includes options such as:
- Accept: The user agrees to the use of cookies.
- Decline: The user refuses the use of cookies.
- Learn: Learn more to privacy policies pages.
Code
CSS
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: #f4f4f4; color: #333; padding: 10px 20px; display: none; justify-content: space-between; align-items: center; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; transition: transform 0.5s ease-in-out; margin: 1rem; border-radius: 0.5rem; }
#cookie-banner div { text-align: end; }
#cookie-banner p { margin: 0 1rem 0 0; font-size: 1rem; }
#cookie-banner button { padding: 8px 15px; font-size: 14px; overflow-wrap: break-word; margin-block-end: 0.5rem; width: 5rem; }
#cookie-banner button:hover { background-color: #005bb5; }
.btn-primary, .btn-secondary { width: fit-content; padding: 0.25rem 1.25rem 0.5rem; cursor: pointer; border-radius: 0.25rem; border: none; }
.btn-primary { background: #054cc3; color: white; }
.btn-secondary { background: #ffffff; color: #161d24; border: 1px solid #ddd; }
HTML
<div id="cookie-banner">
<p>We use cookies to ensure you get the best experience on our website. <a href="/p/privacy-policy.html" style="color: #0073e6;">Learn more our privacy policy</a>.</p>
<div>
<button id="accept-cookies" class="btn-primary">Accept</button>
<button id="decline-cookies" class="btn-secondary">Decline</button>
</div>
</div>
JavaScript
document.addEventListener("DOMContentLoaded", () => { const cookieBanner = document.getElementById('cookie-banner'); if (!localStorage.getItem('cookieConsent')) cookieBanner.style.display = 'flex'; document.getElementById('accept-cookies').onclick = () => { localStorage.setItem('cookieConsent', 'accepted'); cookieBanner.style.display = 'none'; }; document.getElementById('decline-cookies').onclick = () => { localStorage.setItem('cookieConsent', 'declined'); cookieBanner.style.display = 'none'; }; });
Harap berdiskusi dengan sopan dan sesuai pembahasan, jika mengirimkan spam link maka komentar akan dimoderasi. Terima kasih