MB01 Ответов: 1

Как скрыть div с помощью файлов cookie с помощью javascript

Я пытаюсь создать всплывающее сообщение, которое приветствует вас в самом начале. Однако я нахожу это раздражающим, если вы обновили страницу, всплывающее окно возвращается, решением будет печенье. Но я не могу заставить его работать, что я делаю не так. Ниже html, css и js.

<body>

<div id="overlay" class="cover blur-in">
  <div class="content"></div>
    </div>
	    <div class="row pop-up">
		  <div class="box small-6 large-centered">
		    <a href="#" class="close-button">✖</a>
		    <h3 class="popup">Welcome</h3>
		    <p>info </p>
		    <p>info</p>
		    <a href="#" class="button">press for facebook</a>
		  </div>
		</div></body>


.cover {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}

.blur-in {
    -webkit-animation: blur 2s forwards;
    -moz-animation: blur 2s forwards;
    -o-animation: blur 2s forwards;
    animation: blur 2s forwards;
}

.blur-out {
    -webkit-animation: blur-out 2s forwards;
    -moz-animation: blur-out 2s forwards;
    -o-animation: blur-out 2s forwards;
    animation: blur-out 2s forwards;
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-moz-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-o-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }
}

@-webkit-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-moz-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@-o-keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes blur-out {
    0% {
        -webkit-filter: blur(4px);
        -moz-filter: blur(4px);
        -o-filter: blur(4px);
        -ms-filter: blur(4px);
        filter: blur(4px);
    }

    100% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }
}

.pop-up {
    position: fixed;
    margin: 5% auto;
    left: 0;
    right: 0;
    z-index: 2;
}

.box {
    background-color: whitesmoke;
    text-align: center;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 10%;
    position: relative;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}


.button:hover {
    background-color: #7CCF29;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

.close-button {
    transition: all 0.5s ease;
    position: absolute;
    background-color: #FF9980;
    padding: 1.5px 7px;
    left: 0;
    margin-left: -10px;
    margin-top: -9px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: white;
    -webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
    box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}

.close-button:hover {
    background-color: tomato;
    color: #fff;
}

.button {
	margin: 10px;
}

h3.popup {
	line-height: 1.5;
}


<pre>$(document).ready(function() {

  if (!readCookie('hide')) {
    $('.pop-up').hide();
  	$('.pop-up').fadeIn(1000);

  $('.close-button').click(function(e) {
    
    $('.pop-up').fadeOut(700);
      $('#overlay').removeClass('blur-in');
      $('#overlay').addClass('blur-out');
      e.stopPropagation();  }
    
    createCookie('hide', true, 1)
    return false;
  });

});

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires2 = "";
  document.cookie = name+"="+value+expires2+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}


Что я уже пробовал:

Я попытался сделать так, чтобы идентификатор наложения отображался как "нет", но это не помогло. в настоящее время страница загружается с приветственным сообщением, но вы не можете закрыть ее.

Я не забыл загрузить css и js ;)

искренне ваш,
МЕГАБАЙТ

1 Ответов

Рейтинг:
5

Bryian Tan

Если я правильно понял вопрос, то при первом посещении страницы пользователем приветствуется... покажет, во второй раз (обновить страницу) приветствие... не будет показывать. Тем не менее, если cookie hide=true, не показывайте приветственное сообщение.

Есть некоторые проблемы с размещенными кодами.

1. Синтаксическая ошибка, нет закрывающего тега на !readCookie ("скрыть")
2. Синтаксическая ошибка, отсутствует закрывающий тег для документа.готов
3. если (!readCookie('скрыть')) {это должно быть если (readCookie('скрыть')) { ?? если hide=true, спрячьте его!
4. readCookie возвращает строку, которую нужно привести к логическому значению
5. Внутри блока if (!readCookie('скрыть')) {код есть $('.поп-ап').fadeIn(1000); , который я думаю, это должно быть затухание (скрыть)
.. посмотрите на этот пример для получения дополнительной информации.

Вот рабочий пример: CP_cookies - JSFiddle[^]

MB01

Дорогой Брайан Тан, твое решение сработало по большей части. У него были некоторые недостатки, которые я мог решить самостоятельно. Спасибо за то время вы приняли, чтобы помочь мне.