如何使用带有javascript的cookie隐藏div [英] How do I hide a div using cookies with javascript
本文介绍了如何使用带有javascript的cookie隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个在开始时欢迎您的弹出消息。但是，如果你刷新弹出窗口的页面，我觉得很烦人，解决方案就是cookie。但我无法让它发挥作用，我做错了什么。在html，css和js下面。
< 正文 >
< div id = overlay 类 = cover blur-in >
< div class = content > < / div < /跨度> < span class =code-keyword>>
< / div >
< div class = 行弹出 >
< div class = box small-6 large-centered >
< a < span class =code-attribute> href = ＃ class = 关闭按钮 > ✖< / a >
< h3 class = 弹出 > 欢迎< / h3 >
< p > info < / p >
< p > info < / p >
< a href = ＃ class = button > 按facebook < / a >
< / div >
< / div > < / body >
。封面 {
height ： 100％;
width ： 100％;
position ： 绝对;
z-index ： 1;
}
。 blur -in {
- webkit-animation ： 模糊2s前锋;
- moz-animation ： 模糊2s前锋;
- o-animation ： 模糊2s前锋;
动画 ： 模糊2s前锋;
}
。模糊 {
- webkit-animation ： 模糊2s前锋;
- moz-animation ： 模糊2s前锋;
- o-animation ： 模糊2s前锋;
动画 ： 模糊2s前锋;
}
@ - webkit-keyframes blur {
0％{
- webkit-filter ： blur（0px）;
- moz-filter ： blur（0px）;
- o-filter ： blur（0px）;
- ms-filter ： blur（0px）;
filter ： 模糊（0px）;
}
100％{
- webkit-filter ： blur（4px）;
- moz-filter ： blur（4px ）;
- o-filter ： 模糊（4px）;
- ms-filter ： < span class =code-keyword> blur（4px）;
filter ： 模糊（4px）;
}
}
@ - moz-keyframes blur {
0％{
< span class =code-attribute> - webkit-filter ： blur（0 px）;
- 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 ： 模糊（4px）;
- ms-filter ： < span class =code-keyword> blur（4px）;
filter ： 模糊（4px）;
}
}
@ - o-keyframes blur {
0％{
< span class =code-attribute> - 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 ： 模糊（4px）;
过滤器 ： blur（4px）;
}
}
< span class = code-leadattribute> @keyframes blur {
0％{
- webkit -filter ： blur（0px）;
- moz-filter ： blur（0px）;
- o-filter ： blur（0px）;
- ms-filter ： blur （0px）;
过滤器 ： 模糊（0px）;
}
100％{
- webkit-filter < span class =code-keyword>： blur（4px）;
- moz-filter ： blur（4px）;
- o-filter ： blur（4px） ;
- ms-filter ： 模糊（4px）;
过滤器 ： blur（4px）;
}
}
@ - webkit-keyframes blur-out {
0％{
- webkit-filter ： blur（4px）;
- moz-filter ： blur（4px ）;
- o-filter ： 模糊（4px）;
- ms-filter ： < span class =code-keyword> blur（4px）;
filter ： blur（4px）;
}
100％{
-webkit-filter ： blur（0px）;
- moz-filter ： blur（0px）;
- o-filter ： blur（0px） ;
- ms-filter ： 模糊（0px）;
过滤器 ： 模糊（0px）;
}
}
@ - moz-keyframes 模糊 {
0％{
- webkit-filter ： blur（4px）;
- moz-filter ： blur（4px）;
- o-filter ： blur（4px）;
- ms-filter ： 模糊（4px）;
过滤器 ： 模糊（4px）;
}
100％{
-webkit-filter ： blur（0px）;
- moz-filter ： blur（0px）;
- o-filter ： blur（0px） ;
- ms-filter ： 模糊（0px）;
过滤器 ： 模糊（0px）;
}
}
@ - o-keyframes blur-out {
0％{
- webkit-filter ： blur（4px）;
< span class =code-attribute> - moz-filter ： blur（4px）;
- o-filter ： blur（ 4px）;
- ms-filter ： blur（4px）;
filter ： 模糊（4px）;
}
100％{
- webkit-filter ： blur（0px）;
-moz-filter ： blur（0px）;
- o-filter ： blur（0px）;
- ms-filter ： blur （0px）;
过滤器 ： 模糊（0px）;
}
}
@keyframes blur-out {
0％{
- webkit -filter ： blur（4px）;
- moz-filter ： blur（4px）;
- o-filter ： blur（4p x）;
- ms-filter ： blur（4px）;
filter ： 模糊（4px）;
}
100％{
- webkit-filter ： blur（0px）;
-moz-filter ： blur（0px）;
- o-filter ： blur（0px）;
- ms-filter ： blur（0px ）;
过滤器 ： blur（0px）;
}
}
。弹出 {
position ： fixed;
margin ： 5％auto;
left ： 0;
正确 ： 0;
z-index ： < span class =code-keyword> 2;
}
。 box {
< span class =code-attribute> 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）;
}
。按钮：悬停 {
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 ： <跨度class =code-keyword>全部0.5秒轻松;
position ： 绝对;
background-color ： ＃FF9980;
padding ： 1.5px 7px;
left ： 0;
margin-left ： -10px;
margin-top ： -9px;
border-radius < span class =code-keyword>： 50％;
border ： 2px solid #fff;
颜色 ： 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）;
}
。关闭按钮：悬停 {
background-color ： 番茄;
color < /跨度> <跨度class =code-keyword>： #fff;
}
。按钮 {
margin ： 10px;
}
h3 。 popup {
line-height ： 1.5;
}
< pre> $（< span class =code-sdkkeyword> 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 （天）{
var date = new 日期（）;
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）;
}
返回 null ;
}
function eraseCookie（name）{
createCookie（name， ， - 1）;
}
我的尝试：
我尝试将叠加ID显示为无，但这不是诀窍。目前页面加载欢迎消息，但你无法关闭它。
我没有忘记加载css和js;）
真诚的，
MB
解决方案
（ document ）。ready（ function （）{
if （ ！readCookie（' hide'））{
（< span class =code-string>' .pop-up'）。hide（）;
（' 。pop-up'）。fadeIn（ 1000 ）;
I am trying to create a pop-up message which welcomes you at the start. However I find it annoying if you have refresh the page the pop-up comes back, the solution would be cookies. But I can not get it working, what am I doing wrong. Below the html, css and 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);
}
What I have tried:
I have tried making the overlay id display as "none" but this did not the trick. currently the page loads with the welcome message but you can not close it.
I did not forget to load the css and js ;)
yours sincerely,
MB
解决方案
(document).ready(function() { if (!readCookie('hide')) {
('.pop-up').hide();
('.pop-up').fadeIn(1000);
这篇关于如何使用带有javascript的cookie隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
