Javascript 年龄验证弹出窗口：设置cookie以记住决策

我使用以下代码在香烟网站上显示年龄验证弹出窗口：

$（函数（）{
$（“[data popup close]”）。在（'click'，函数（e）上{
var targeted_popup_class=jQuery（this）.attr（'data-popup-close'）；
$（“[data popup=“”+targeted_popup_class+”）。淡出（350）；
e、 预防默认值（）；
});
});

//弹出年龄验证
$（函数（）{
$（“[data popup close]”）。在（'click'，函数（e）上{
var targeted_popup_class=jQuery（this）.attr（'data-popup-close'）；
$（“[data popup=“”+targeted_popup_class+”）。淡出（350）；
e、 预防默认值（）；
});
});
#弹出窗口{
z指数：1000；
排名：0；
左：0；
右：0；
底部：0；
位置：固定；
背景色：rgba（0,0,0,0.8）；
}
.验证窗口{
位置：绝对位置；
最高：50%；
左：50%；
宽度：300px；
高度：200px；
左边距：-150px；
利润上限：-100px；
溢出：隐藏；
边界半径：10px；
填充：20px；
背景色：#fff；
框大小：边框框；
盒影：0 20px 60px rgba（0,0,0,0.2）；
}
.验证窗口img{
显示：块；
宽度：250px；
高度：50px；
保证金：0自动；
填充：20px；
}
.验证窗口h3{
字体系列：“Roboto”，无衬线；
字号：1em；
颜色：#4d；
线高：1.7；
边缘顶部：10px；
文本对齐：居中；
}
.验证窗口p{
字体系列：“Roboto”，无衬线；
字号：1em；
颜色：#4d；
边缘顶部：10px；
线高：1.7；
文本对齐：居中；
}
.按钮是的，
.按钮编号{
背景：#fff；
颜色：#ADCC21；
宽度：20%；
边缘顶部：10px；
边框：2个实心#ADCC21；
填充：12px 17px；
边界半径：30px；
字体系列：“Roboto”，无衬线；
文本对齐：居中；
字号：1em；
}
.按钮编号{
浮动：对；
右边距：20px；
边框：2个实心#95969a；
颜色：#95969a；
显示：块；
}
.按钮是的{
浮动：左；
左边距：20px；
}
.按钮是：悬停{
背景：ADCC21；
颜色：#fff；
过渡：所有0.2秒缓解；
光标：指针；
}
.按钮编号：悬停{
背景#95969a；
颜色：#fff；
过渡：所有0.2秒缓解；
光标：指针；
}

年龄验证
你至少18岁吗

对
页面内容

以下实现使用
cookie
存储和检索年龄协议的状态。您应该在
JavaScript
中添加一个条件，以标识应用程序启动时的协议状态。默认情况下，也可以使用
css
隐藏
弹出窗口

CSS

使用Cookies的JavaScript

$(function() {

  //Check it the user has been accpeted the agreement
  if (!(document.cookie && document.cookie == "accepted")) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    document.cookie = "accepted";

    e.preventDefault();
  });

});

使用本地存储的JavaScript

// Popup Age Verification

$(function() {

  //Check it the user has been accpeted the agreement
  if (!localStorage.getItem('accepted')) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    localStorage.setItem('accepted', true);

    e.preventDefault();
  });
});

您已经尝试添加了哪些cookie？这不是编码服务。问题应该显示研究的证据和自己解决问题的尝试，一个与编码相关的特定问题的清晰轮廓，以及一个，所以我们可以提供帮助。请看。继续，如果不成功，请在这里检查并回答您的问题。可能在这里离题。这是一个关于编程的问答，而不是关于实现你的特性。到目前为止看起来不错。但是当我刷新页面时，弹出窗口再次显示。您是否设置了
display:none用于
#弹出窗口
。否则它会让饼干变硬。是的，我做了。我更新了提琴，但每次我刷新浏览器时，弹出窗口似乎仍然在那里……请看更新后的答案。我使用
localStorage
添加了解决方案。由于代码在JSFIDLE内部的iFrame中执行，因此可能无法反映网站的确切行为。但这两种方法都是正确的。
// Popup Age Verification

$(function() {

  //Check it the user has been accpeted the agreement
  if (!localStorage.getItem('accepted')) {
    $("#popup").show();
  }

  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

    //Set a cookie to remember the state
    localStorage.setItem('accepted', true);

    e.preventDefault();
  });
});