如何添加 JavaScript cookies 同意警报在 3 分钟后消失

Question

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;}
}

Answer 1

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;} }