Cookie alert at bottom

Question

I want a alert at the bottom of the screen that says that the website is using cookies (and it only needs to be shown to new users). It needs to stay at the bottom if you scroll down too. I don't know how to do it, because I am a self-learning person and I am just starting learning how to code. Thanks for the help.

Answer 1

第1部分： HTML＆amp; CSS

我们需要将警报面板添加到页面底部。为了这个面板的样式，我们应该使用CSS。此面板还有确认按钮。如果用户单击按钮，我们将cookie设置为浏览器，并且不再显示该面板。

<div class="bottom" id="alert">
  this website use cookies
  <button onclick="accpetCookie()">
    click here for accpet cookie
 </button>
</div>
<div class="scroll">
  website content
</div>

用于设置样式我们创建CSS类

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ccc;
  color: #fff
}

.scroll {
  min-height: 1500px;
}

第2部分： Javascript

    <script>
    // if user has already checked the confirmation button
    // the alert panel should be hidden.   
    if (getCookie('accepted') === 'yes') {
        document.getElementById("alert").style.display = "none";
    }

    // user clicks the confirmation -> set the 'yes' value to cookie and set 'accepted' as name
    function accpetCookie() {
        setCookie('accepted', 'yes', 100);
    }

    // code from :http://stackoverflow.com/a/4825695/191220
    // set cookie method
    function setCookie(c_name, value, exdays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
        document.cookie = c_name + "=" + c_value;
    }

    // get cookie method   
    function getCookie(c_name) {
        var i, x, y, ARRcookies = document.cookie.split(";");
        for (i = 0; i < ARRcookies.length; i++) {
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == c_name) {
                return unescape(y);
            }
        }
    }
</script>

查看Jsfiddle页面了解即时演示。