javascript - 当用户第一次访问网站时创建下拉横幅

标签 javascript jquery html

我想创建这样的东西:

/image/bzMVz.jpg

当用户第一次访问我的网页时,我希望黑色横幅下拉并向他们询问问题或提醒他们。我不知道这叫什么。如果有人能指出我正确的方向,我将不胜感激。我确信某个地方有一个 JS 插件,但我找不到它。 谢谢

最佳答案

您不需要插件来执行此操作。

为了尽可能做到跨浏览器友好,请使用 cookie 来了解用户之前是否访问过。

代码相当简陋,但我希望它能有所帮助。

最初,如果您使用 CSS 隐藏元素,则在 javascript 加载时不会弹出。

如果您的 html 文档中的页面顶部有该元素:

添加CSS:

<style>
.dropdown-notification {
   height: 40px;
   line-height: 40px;
   position: relative;
   top: -40px;
   transition: top .2s; // don't forget to use prefixes
}
.dropdown-notification.active {
   top: 0;
}
</style>

添加到您的 body :

<body>

   <div class="dropdown-notification text-center">
      Hi, I'm a drop down <button class="close">Close</button>
   </div>

   ... rest of html here

</body>

并使用 cookie 插件 https://github.com/carhartl/jquery-cookie 将这个 jQuery 添加到文档加载中:

// Check if cookie 
if ($.cookie("noti") !== "closed") { // or you could just check for cookie existing
   $('.dropdown-notification').addClass('active');
}

// On button click close and add cookie (expires in 100 days)
$('.close').on('click', function(){
   $.cookie("noti", "closed", { expires : 100 });
   $('.dropdown-notification').removeClass('active');
})

一个jsfiddle is here

关于javascript - 当用户第一次访问网站时创建下拉横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24070627/

相关文章:

javascript - 从 div 中的图像获取 Id 属性

jquery - 如何在jquery中检索多个级别的所有子元素的类名?

javascript - Grails:twitter bootstrap 3 模式在每次迭代中都有相同的内容

javascript - 如何在模态显示之前刷新 Bootstrap 模态刷新

javascript - 如何使用javascript添加粗体文本

javascript - 从文本中删除所有空格

javascript - 单击时向子元素添加事件/禁用

javascript - 键盘向上/向下滚动

javascript - css中平滑的帧移动动画

javascript - 使用 angularjs 将单选按钮绑定(bind)到 ng-model