Version 1.0 - See the changelog
If you like this library, please consider making a donation to support my work.
Filesize: 0.4 kB gzipped
Really simple library with pure vanilla javascript, no jQuery involved.
- Supports accessability with aria attributes
- Supports options
- Supports animations
- Supports multiple styles
- Supports position
To remember the choice made by the user, local storage is used.
You can make the html and css how you like, but here are some demos for inspiration.
You can also get them in examples.
Add the stylesheet.
<link rel="stylesheet" href="assets/css/dist/style.css" />Add the confirm box. To just make it work, not much HTML is required.
<div id="ecc" hidden>
<button data-accept>Accept</button>
<button data-cancel>Decline</a>
</div>Add the javascript.
<script src="assets/js/dist/script.js"></script>
<script>
let ecc = new euCookieConfirm();
ecc.script(() => {
console.log("Place your script here, for example Google Analytics.");
});
</script>In the examples folder folder you can find complete examples.
By default the dialog will appear at the bottom, but if you add the class ecc-top it will be placed at the top instead.
No style and minimal html is added. It just shows two buttons. However it's still fully functional. You can use it as a starting point if you want to create something from scratch.
The function call below will not change anything compared to euCookieConfirm(), because every option is set to its default value.
let new = euCookieConfirm({
localStorageName: "eu-cookie-confirm",
selectorAccept: "[data-accept]",
selectorClose: "[data-cancel]",
selectorMessage: "#ecc"
});| Option | Default | Description |
|---|---|---|
localStorageName |
"eu-cookie-confirm" |
The name that will be stored in the local storage. |
selectorAccept |
"[data-accept]" |
The selector of the element that can be clicked to allow cookies. |
selectorClose |
"[data-cancel]" |
The selector of the element that can be clicked to disallow cookies. |
selectorMessage |
"#ecc" |
The selector of the element box that contains the cookie question. |
This library is tested with the following browsers.
- Chrome
- Edge
- Firefox
- Opera
This library is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please create a new issue.