Cookie notice snippet

Developer
Rico Sta. Cruz
Size
2,651 Kb
Views
4,048
  1. Cookie notice snippet Previews
  2. Cookie notice snippet HTML Codes
  3. Cookie notice snippet CSS Codes
  4. Cookie notice snippet JS Codes

How do I make an cookie notice snippet?

What is a cookie notice snippet? How do you make a cookie notice snippet? This script and codes were developed by Rico Sta. Cruz on 19 January 2023, Thursday.

Cookie notice snippet Previews
IQ Test

Cookie notice snippet - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cookie notice snippet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Cookie notice snippet - Script Codes CSS Codes

.cookie-notice { box-sizing: border-box; position: fixed; bottom: 32px; left: 50%; width: 500px; margin-left: -250px; padding: 12px; background: white; box-shadow: 0 2px 4px rgba(20, 40, 80, 0.2); border-radius: 3px; font-size: 0.86em; line-height: 1.5; color: #456; transform: translate3d(0, 0, 0); animation: cookie-notice-fadein 500ms ease;
}
@keyframes cookie-notice-fadein { 0% { transform: translate3d(0, 128px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 100; }
}
.cookie-notice-message > p { margin: 0; padding: 0; width: 80%;
}
.cookie-notice > button { margin: 0; padding: 0; border: 0; background: transparent; width: 20%; color: dodgerblue; position: absolute; top: 8px; right: 0; width: 18%; bottom: 8px; cursor: pointer; font-weight: bold; border-left: solid 1px rgba(0, 40, 80, 0.1);
}
.cookie-notice > button:hover { color: #4ba6ff;
}
.cookie-notice > button:active { color: #1873cc;
}

Cookie notice snippet - Script Codes JS Codes

/* * cookie-notice.js */
void (function (root, factory) { if (typeof define === 'function' && define.amd) define(factory) else if (typeof exports === 'object') module.exports = factory() else root.CookieNotice = factory()
}(this, function () { function CookieNotice () { ready(run) } CookieNotice.options = { message: '<p>This website uses cookies to help us give you the best experience when you visit. By using this website you consent to our use of these cookies.</p>', dismiss: 'Dismiss' } function run () { if (window.localStorage.cookieNoticeDismissed) return show() } function dismiss () { var notice = document.getElementById('cookie-notice') if (notice) notice.parentNode.removeChild(notice) window.localStorage.cookieNoticeDismissed = true } function undismiss () { delete window.localStorage.cookieNoticeDismissed } function show () { var $div = document.createElement('div') $div.className = 'cookie-notice' $div.id = 'cookie-notice' var $message = document.createElement('div') $message.className = 'cookie-notice-message' $message.innerHTML = CookieNotice.options.message $div.appendChild($message) var $dismiss = document.createElement('button') $dismiss.innerHTML = CookieNotice.options.dismiss $dismiss.onclick = dismiss $div.appendChild($dismiss) document.body.appendChild($div) } function ready (fn) { if (document.readyState === 'complete') { return fn() } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn) } else { document.attachEvent('onreadystatechange', function () { if (document.readyState === 'interactive') fn() }) } } CookieNotice.run = run CookieNotice.dismiss = dismiss CookieNotice.undismiss = undismiss return CookieNotice
}));
/* * Run it */
CookieNotice.undismiss() // just so it always shows up in this demo
CookieNotice()
Cookie notice snippet - Script Codes
Cookie notice snippet - Script Codes
Home Page Home
Developer Rico Sta. Cruz
Username rstacruz
Uploaded January 19, 2023
Rating 3
Size 2,651 Kb
Views 4,048
Do you need developer help for Cookie notice snippet?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rico Sta. Cruz (rstacruz) Script Codes
Name
Decca example
A Pen by Rico Sta. Cruz
CSS variables iOS bug demo
React template
Startup name generator
Railroad markers
Swipeshow demo
Styled file input
Text in a border
Background blur hack
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!