Due to these EU cookies laws, all the website must display a cookie warning for reader to continue or leave. After so much time to search for the best solution since we display Ad-sense and Amazon ads, we need to comply and finally we found a that shows us how to do it. It’s quite simple.
While we’re searching, we found a way to display the text box with a close button to turn it off.
We need the scripts
$jC(document).ready(function(c) {
$jC('.alert-close').on('click', function(c){
$jC(this).parent().fadeOut('slow', function(c){
});
});
});
no-conflict and set in the footer.php
<script type="text/javascript">
var $jC=jQuery.noConflict();
$jC(document).ready(function(){
});
</script>
<script src="<?php bloginfo('template_url'); ?>/ijs/cookie.js" type="text/javascript"></script>
The textbox with close button
<div id="cookie"> <p style="text-align=center";><em> Dognmonkey uses <a href="//www.dognmonkey.com/techs/privacy-policy" target="_blank">cookies</a> to give you the best experience. Please continue if you're OK with this.<div class="alert-close">×</div></em></p></div>
CSS for the text box
#cookie {position:fixed;font-size:.6em; background:url(../images/info_icon.png) 10px 11px #0079a9;background:url(../images/info_icon.png) 10px 11px,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#009ddc),color-stop(100%,#0079a9));background:url(../images/info_icon.png) 10px 11px,-moz-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-ms-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-o-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,linear-gradient(top,#009ddc,#0079a9);background-repeat:no-repeat;width:100%;color:#fff;height:auto;text-align:center;padding: 2px;word-wrap:break-word;border: 2px solid #fff;bottom:80px;z-index:1000 }
.alert-close{background:rgba(255,255,255,.1);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);color:#FFF;cursor:pointer;font-size:24px;font-weight:600;height:24px;line-height:20px;position:absolute;right:11px;top:9px;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out;width:24px}