我想创建这样的东西:
当用户第一次访问我的网页时,我希望黑色横幅下拉并向他们询问问题或提醒他们。我不知道这叫什么。如果有人能指出我正确的方向,我将不胜感激。我确信某个地方有一个 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');
})
关于javascript - 当用户第一次访问网站时创建下拉横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24070627/