У меня есть домашнее задание, и мне нужна помощь, чтобы его исправить У меня всплывающий код HTML

/*
You'll probably want to drop a cookie so this doesn't pop up everytime. I'd recommend this plugin:
https://github.com/js-cookie/js-cookie
*/

overAge = function () {
  $('#age-verify').addClass('hidden');
}

underAge = function () {
  $('#age-verify').addClass('under');
}

goBack = function () {
    window.history.back();
}
#age-verify {
  position: fixed;
    z-index: 9997;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 500ms;
}
#age-verify .window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 250px;
  overflow: hidden;
  padding: 40px;
  margin-left: -200px;
  margin-top: -125px;
  background-color: #fff;
  border: 6px solid #ED6A5A;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transition: 500ms;
  z-index: 9998;

}
#age-verify .window span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-family: "Source Sans Pro", sans-serif;
}
#age-verify .window span.title {
  color: #ED6A5A;
  font-size: 24px;
}
#age-verify .window button {
  border: 0;
  margin: 0;
  padding: 0;
  width: 48%;
  height: 60px;
  color: #FFF;
  font-size: 18px;
  background-color: #ED6A5A;
  margin-top: 20px;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: .2s;
}
#age-verify .window button.back {
  display: block;
  float: none;
  margin: auto;
  background-color: #fff;
  color: #ED6A5A !important;
  margin-top: 20px;
}
#age-verify .window button.yes {
  float: left;
}
#age-verify .window button.no {
  float: right;
}
#age-verify .window button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background-color: #f29488;
}
#age-verify .window .underBox {
  position: absolute;
  width: 400px;
  height: 250px;
  padding: 40px;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ED6A5A;
  transition: 500ms;
  box-sizing: border-box;
}
#age-verify .window .underBox * {
  color: #FFF !important;
}
#age-verify.hidden {
  opacity: 0;
  visibility: hidden;
}
#age-verify.hidden .window {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}
<div id="age-verify">
<div class="window"><span class="title">Are you over 18?</span> <span>To visit our website, you must be of legal drinking age.</span> <button class="yes" onclick="overAge()">Yes</button> <button class="no" onclick="underAge()">No</button>
<div class="underBox"><span class="title">Sorry!</span> <span>You need to be at least 18 to visit our website.</span> <button class="back" onclick="parent.location='https://www.google.dk/'">Go Back</button></div>
<span> </span></div>
</div>

Я хочу добавить файл cookie, чтобы отображать всплывающее окно только один раз при загрузке, а срок действия cookie истекает через час

Я пробовал это много статей, но могу ли я знать, как я могу установить их правильно

https://www.thepolyglotdeveloper.com/2018/02/create-email-subscription-popup-jquery/

Может ли кто-нибудь решить это за меня :)

2
Rezan Rasoul 27 Мар 2019 в 12:30

1 ответ

Лучший ответ

Вы можете использовать эти 2 функции, которые я добавил в конце кода, для получения и установки файлов cookie. срок действия cookie истекает, как вы сказали, через 60 минут. Когда страница загружается, мы проверяем, можем ли мы получить нужный файл cookie. если мы можем, то мы спрячем всплывающее окно, иначе оно будет показано.

/*
You'll probably want to drop a cookie so this doesn't pop up everytime. I'd recommend this plugin:
https://github.com/js-cookie/js-cookie
*/

if(getCookie("age") != "")
{
$('#age-verify').addClass('hidden');
}
overAge = function () {
  setCookie("age", "overAge");
  $('#age-verify').addClass('hidden');
}

underAge = function () {
  $('#age-verify').addClass('under');
}

goBack = function () {
    window.history.back();
}

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
#age-verify {
  position: fixed;
    z-index: 9997;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 500ms;
}
#age-verify .window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 250px;
  overflow: hidden;
  padding: 40px;
  margin-left: -200px;
  margin-top: -125px;
  background-color: #fff;
  border: 6px solid #ED6A5A;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  transition: 500ms;
  z-index: 9998;

}
#age-verify .window span {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font-family: "Source Sans Pro", sans-serif;
}
#age-verify .window span.title {
  color: #ED6A5A;
  font-size: 24px;
}
#age-verify .window button {
  border: 0;
  margin: 0;
  padding: 0;
  width: 48%;
  height: 60px;
  color: #FFF;
  font-size: 18px;
  background-color: #ED6A5A;
  margin-top: 20px;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: .2s;
}
#age-verify .window button.back {
  display: block;
  float: none;
  margin: auto;
  background-color: #fff;
  color: #ED6A5A !important;
  margin-top: 20px;
}
#age-verify .window button.yes {
  float: left;
}
#age-verify .window button.no {
  float: right;
}
#age-verify .window button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  background-color: #f29488;
}
#age-verify .window .underBox {
  position: absolute;
  width: 400px;
  height: 250px;
  padding: 40px;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ED6A5A;
  transition: 500ms;
  box-sizing: border-box;
}
#age-verify .window .underBox * {
  color: #FFF !important;
}
#age-verify.hidden {
  opacity: 0;
  visibility: hidden;
}
#age-verify.hidden .window {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
#age-verify.under .window .underBox {
  top: 0%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="age-verify">
<div class="window"><span class="title">Are you over 18?</span> <span>To visit our website, you must be of legal drinking age.</span> <button class="yes" onclick="overAge()">Yes</button> <button class="no" onclick="underAge()">No</button>
<div class="underBox"><span class="title">Sorry!</span> <span>You need to be at least 18 to visit our website.</span> <button class="back" onclick="parent.location='https://www.google.dk/'">Go Back</button></div>
<span> </span></div>
</div>
0
marc_s 27 Мар 2019 в 19:46