下のCookieアラート

Question

ウェブサイトがクッキーを使用しているという警告が画面下部に表示されます（新しいユーザーにのみ表示する必要があります）。下にスクロールすると、下に留まる必要があります。私は自己学習の人であり、コード作成の仕方を学び始めているので、どうやってそれを行うのか分かりません。 助けてくれてありがとう。

Answer 1

パート1：私たちは、ページの下部に警告パネルを追加する必要が HTML & 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ページをご確認ください。