在页面加载时显示启用 cookie 的 Jquery 通知消息答案

【问题标题】：Show cookie-enabled Jquery notification message on page load在页面加载时显示启用 cookie 的 Jquery 通知消息
【发布时间】：2010-12-17 22:42:28
【问题描述】：

我浏览了论坛并阅读了许多与我的问题相关的帖子，但我无法真正找到我正在寻找的答案。

我想在页面加载时向用户显示一条带有 jquery 的消息，并允许他们通过单击关闭链接来关闭 div。一旦关闭，脚本应该记住在该会话期间不要再次打开。我猜它会使用 cookie。

这是 XHTML：

<div class="alertbox">
  <span class="message">Please upgrade your browser</span>
  <div class="bloc_navigateurs"> 
    <a href="http://download.mozilla.org/?product=firefox-3.6.13&amp;os=win&amp;lang=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Firefox-16.gif" width="16" height="16" alt="Firefox" /></a>
    <a href="http://www.google.com/chrome?hl=fr" target="_blank"><img src="includes/themes/default/images/icons/misc/Chrome-16.gif" width="16" height="16" alt="Chrome" /></a>
    <a href="http://www.01net.com/telecharger/windows/Internet/navigateur/fiches/13759.html" target="_blank"><img src="includes/themes/default/images/icons/misc/IE-16.gif" width="16" height="16" alt="Internet Explorer " /></a>
  </div>
  <span class="close">close</span>
</div>

如您所见，这建议 IE6 用户升级他们的浏览器

【问题讨论】：

哎呀，非常有意义的消息 :) 我喜欢这样。

标签： jquery cookies notifications message

【解决方案1】：

我会使用jQuery cookie plugin。

为创建 cookie 的关闭链接的 onclick 事件绑定一个处理程序。在显示 div 之前，请检查 cookie。

<script>
$(function() {
  var $box = $(".alertbox"),
      stateCookieName = 'alertbox_state',
      alreadyClosed = $.cookie(stateCookieName);

  // The box should already be hidden initially (using CSS preferrably).
  // If not, uncomment the line below:
  // $box.hide();

  // Show the box if it hasn't already been closed.
  if (alreadyClosed != 1) {
    $box.show();
  }

  $box.find('.close').click(function() {
    $box.hide();
    $.cookie(stateCookieName, 1);
  });
});
</script>

【讨论】：

嗨 simshaun，非常感谢您这么快的回复。我刚刚测试了建议的代码，它没有工作。 div 仍然被 CSS 关闭。我正在使用 Chrome 8
你能发个网址让我测试一下吗？已经很晚了，我的大脑可能会被炸，但我发布的内容对我来说是正确的。 :)
嘿 Simshaun，这是一个尚未托管在网络上的本地项目。我是否还需要修改您的代码并添加文件
@simshaun，对不起，它正在工作，除了，我认为 cookie 部分不太工作。该框正在关闭，但它在页面加载时继续加载
有萤火虫吗？如果是这样，请获取 Firecookie 扩展。完成后，您将能够查看 cookie 是否设置正确，以及它的值。（您也可以通过 Page Info 查看 cookie，但需要更长的时间。）

【解决方案2】：

从here获取cookie函数，然后你可以将alertBox设置为默认隐藏：

$(document).ready(function(){
  if(readCookie('warnedIE')==null){
    $('.alertbox').show();
   createCookie('warnedIE','true',30);
  }
});

【讨论】：

【解决方案3】：

我想你会在该链接中找到一些帮助：
http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/

【讨论】：