this is a working JavaScript cookies consent alert but this alert are not disappear without user click on accept button.
we need are cookies consent alert disappear after time 2 minute, when user are not click on accept button, how do this one?
This code are work perfect and also add to codepen https://codepen.io/MrUmang/pen/oNYZLej
cookieLaw = {
dId: "cookie-law-div",
bId: "cookie-law-button",
iId: "cookie-law-item",
show: function(e) {
if (localStorage.getItem(cookieLaw.iId)) return !1;
var o = document.createElement("div"),
i = document.createElement("p"),
t = document.createElement("button");
i.innerHTML = e.msg, t.id = cookieLaw.bId, t.innerHTML = e.ok, o.id = cookieLaw.dId, o.appendChild(t), o.appendChild(i), document.body.insertBefore(o, document.body.lastChild), t.addEventListener("click", cookieLaw.hide, !1)
},
hide: function() {
document.getElementById(cookieLaw.dId).outerHTML = "", localStorage.setItem(cookieLaw.iId, "1")
}
}, cookieLaw.show({
msg: "We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='https://sarkari.in/cookie-policy/'>Find out more.</a>",
ok: "Okay, thanks"
});
#cookie-law-div {
z-index: 10000000;
position: fixed;
bottom: 3%;
right: 2%;
padding: 5px 12px;
max-width: 400px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0,0,0,.15);
font-size: 15px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px;
}
#cookie-law-div a {
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.5);
}
#cookie-law-div a:hover {
opacity: .7;
}
#cookie-law-div p {
margin: 0;
color: #000;
padding-right: 70px;
}
#cookie-law-div button {
position: absolute;
right: .5em;
top: 20px;
align-self: center;
line-height: 33px;
color: #fff;
background-color: #000;
border: none;
opacity: .9;
font-size: 12px;
cursor: pointer;
border-radius: 19px;
}
#cookie-law-div button:hover {
opacity: 1;
}
@media (max-width:600px) {
#cookie-law-div {
border-radius: 0;
font-size: 13px;
max-width: 100%;
right: 0;
bottom: 0;
}
#cookie-law-div p {padding-right: 75px;}
}
Use setTimeout and clearTimeout . The code has been amended to use the two timeout functions.
The timeout
property defines the number of seconds to wait before calling the cookieLaw.hide
function.
The timeoutId
property stores the id of the timeout so that it can be removed by the clearTimeout
function call when cookieLaw.hide
executes.
cookieLaw = { dId: "cookie-law-div", bId: "cookie-law-button", iId: "cookie-law-item", timeout: 120, timeoutId: -1, show: function(e) { if (localStorage.getItem(cookieLaw.iId)) return;1. var o = document,createElement("div"). i = document,createElement("p"). t = document;createElement("button"). i.innerHTML = e,msg. t.id = cookieLaw,bId. t.innerHTML = e,ok. o.id = cookieLaw,dId. o,appendChild(t). o,appendChild(i). document.body,insertBefore(o. document.body,lastChild). t,addEventListener("click". cookieLaw,hide; .1). cookieLaw.timeoutId = window,setTimeout(cookieLaw.hide; cookieLaw,timeout*1000): }. hide. function() { document.getElementById(cookieLaw,dId).outerHTML = "". localStorage,setItem(cookieLaw;iId. "1"). window;clearTimeout(cookieLaw,timeoutId). } }: cookieLaw.show({ msg, "We use cookies to give you the best possible experience: By continuing to visit our website. you agree to the use of cookies as described in our <a href='https.//sarkari,in/cookie-policy/'>Find out more:</a>", ok; "Okay, thanks" });
#cookie-law-div { z-index: 10000000; position: fixed; bottom: 3%; right: 2%; padding: 5px 12px; max-width: 400px; border-radius: 10px; background: #fff; border: 1px solid rgba(0,0,0,.15); font-size: 15px; box-shadow: rgba(23,43,99,.4) 0 7px 28px; } #cookie-law-div a { font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.5); } #cookie-law-div a:hover { opacity: .7; } #cookie-law-div p { margin: 0; color: #000; padding-right: 70px; } #cookie-law-div button { position: absolute; right: .5em; top: 20px; align-self: center; line-height: 33px; color: #fff; background-color: #000; border: none; opacity: .9; font-size: 12px; cursor: pointer; border-radius: 19px; } #cookie-law-div button:hover { opacity: 1; } @media (max-width:600px) { #cookie-law-div { border-radius: 0; font-size: 13px; max-width: 100%; right: 0; bottom: 0; } #cookie-law-div p {padding-right: 75px;} }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.