[英]how to add JavaScript cookies consent alert disappear after time 3 minute
這是一個有效的 JavaScript cookies 同意警報,但如果用戶單擊接受按鈕,此警報不會消失。
我們需要的是 cookies 同意警報在 2 分鍾后消失,當用戶沒有點擊接受按鈕時,這個怎么辦?
此代碼工作完美,還添加到 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;}
}
使用setTimeout 和 clearTimeout 。 代碼已被修改為使用兩個超時函數。
timeout
屬性定義在調用cookieLaw.hide
function 之前等待的秒數。
timeoutId
屬性存儲超時的 id,以便在執行 cookieLaw.hide 時可以通過clearTimeout
cookieLaw.hide
調用將其刪除。
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;} }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.