2ページ目の読み込み時に通知バーを隠すようにCookieを設定するにはどうすればよいですか？

Question

これは私が望んでいないものです：

• 新しいユーザーが私のウェブサイトにアクセスします。ビューポートの下部に固定された通知バーが表示されます。
• ユーザーはメニュー項目をクリックして別のページに移動します。クッキーは2ページ目の読み込み時に設定され、60日間表示バーを非表示にします（JavaScriptが非同期に読み込まれるようにするには、100％非表示にする必要があります。
• ユーザーは「OK」ボタンをクリックして通知バーを閉じ、同じCookieを設定することもできます。

これが私のHTMLです：

<div id="cookie-message"> 
    <span>Cookie notice here <a href="#">Read more</a> <a href="#" id="cookie-message-close">Ok</a></span> 
</div> 

私はjQueryを使ってこれを行うことができますどのように？

ありがとうございます！

Answer 1

APIを使用してCookieを処理すると、作業がはるかに簡単になります。

まず、display: none;をdiv cookie-messageに入れます。隠されたかどうかの通知のロジックについて

、あなたは、ウィンドウの最初のロードでリスナーを置くことができます。

window.addEventListener('load', function(){...}); 

ウィンドウがロードされたとき、あなたが瞬間を得ることができるこの方法で。この時点で通知を読み取るためのクッキーがない場合、div（$('#cookie-message').show()）を表示してクッキーを設定します。既に設定されているクッキーがある場合は何もしません。

OKクリックについては、 （$('#cookie-message').show()）を通知div要素を非表示にするには、リンクにクリックリスナを設定する。

はあなたを助けるために、私は私が言ったのsimple example例を作る。

Answer 2

おかげであなたの応答のために多くのことを、エンリケ。しかし、私は、 "jQuery $は、関数ではありません"というエラーになりました。

見つかりました「jQuery Cookie」は非推奨となり、js-cookieは新しいバージョンです。これを含めることで、古いクッキー機能を新しいものに変更することで、今すぐ完璧に動作します！私はWordpressの中で開発していますから、私はので、WordPressのnoConflict（）モードでのjQueryに$を変更した

window.addEventListener('load', function(){ 
    jQuery('#cookie-message-close').click(function(){ 
     jQuery('#cookie-message').hide(); 
    }); 

    if (!Cookies.get("cookie-message-bar")) 
    { 
     jQuery('#cookie-message').show(); 
     Cookies.set('cookie-message-bar', true, { expires: 60 }); 
    } 
}); 

注：

これが私の最後のjQueryのコードは、 "JS-クッキー" を使用して、あります。