コンテンツで要素を作成し、
<div id="cookie-notification">
<!-- Your content goes here !-->
<a href="#" id="close-notifiction">Close for now</a>
<a href="#" id="close-notifiction-forever">Never show again</a>
</div>
cssを使用して下部に固定し、大きなz-indexを使用して他の上部に配置します。
#cookie-notification{
position : fixed;
bottom : 10px;
right : 10px;
z-index : 99999;
//more of your styles ..
}
これで、ページの右下に通知が表示されます。
次に、jQueryで非表示にします。
$('#close-notification').click(function(){
$('#cookie-notification').fadeOut(300);
return false;
}
「これを二度と表示しない」には、これを二度と表示しないようにCookieを設定し、ページの読み込み時にこのCookieが設定されているかどうかを確認し、その場合は通知を非表示にします。
$('#close-notification').click(function(){
$('#cookie-notification').fadeOut(300);
createCookie('show-notification','never',9999);
//refer the link below and use the code from there to make create cookie work
return false;
}
//ページの読み込み時にCookieが設定されているかどうかを確認します
$(document).ready(function(){
if(readCookie('show-notification') == 'never'){
$('#cookie-notification').hide();
}
}
このページの下部にあるCookieコードは次のとおりですhttp://www.quirksmode.org/js/cookies.html