Question

我想创建这样的东西：

http://i.stack.imgur.com/bzMVz.jpg

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

Answer 1

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

为了尽可能跨浏览器友好，请使用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>

   <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');
})

A jsfiddle is here

Answer 2

您可以执行以下操作并添加Cookie以检查用户之前是否访问过该网站：

$(document).ready(function() {
    // check cookie
    var visited = $.cookie("visited")

    if (visited == null) {
        $('some-header').show();
        $.cookie('visited', 'yes'); 
        alert($.cookie("visited"));         
    }

    // set cookie
    $.cookie('visited', 'yes', { expires: 1, path: '/' });
});

如果您想使用纯Javascript路线，可以查看使用这些功能的网页： http://www.quirksmode.org/js/cookies.html#script

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 expires = "";
    document.cookie = name+"="+value+expires+"; 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);
}

Answer 3

我使用HTML5本地存储。

这是链接： Local Storage

只需在点击页面时检查“已访问”等变量即可。如果它为null，则将其设置为1或其他任何并删除横幅。否则，什么也不做。

用户首次访问网站时创建下拉横幅

3 个答案: