cookie info - no jQuery needed - all-in-one drop in code

index.html

<!--

 NO jQuery needed

 test:  https://jsfiddle.net/BananaAcid/rz3h5kmx/

 see the message later again, paste this as url into the nav bar of your browser:
    javascript:document.getElementById('cookieMsgContainer').style.display='block';

-->



<!-- (c) Nabil Redmann / BananaAcid 2018 -->
<style>
    #cookieMsgContainer {display: none;}
    #cookieMsg + section {transition: .5s ease-out; z-index: 2000;}
    #cookieMsg:not(:checked) + section {transform: translateY(100%);}
</style>
<input type="checkbox" checked id="cookieMsg" style="display: none" />
<section id="cookieMsgContainer" style="position: fixed; bottom: 0; left: 0; background: black; text-align: left; color: white; width: 100vw; padding: 25px; font-family: sans-serif;">

    <article style="max-width: 600px; margin: auto;">
        <p><strong>Diese Seite verwendet Cookies</strong></p>

        <ul>
            <li>... um die Navigation auf dieser Seite zu ermöglichen <small>(Session-Cookie)</small>.</li>
            <li>... um den Traffic auf dieser Website zu analysieren. Informationen zu Ihrer Nutzung auf dieser Website werden anonym an Google übermittelt.</li>
        </ul>

        <p>
            <a style="color: #08c" href="/datenschutz/">Weitere Details</a>
        </p>

        <p style="text-align: center;">
            <label for="cookieMsg" style="padding: 10px; background: #08c; color: white; max-width: 100px; text-align: center; cursor: pointer;">Akzeptieren</label>
        </p>
    </article>

</section>

<script>
    //https://stackoverflow.com/a/7053197/1644202
    function ready(callback){
        // in case the document is already rendered
        if (document.readyState!='loading') callback();
        // modern browsers
        else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
        // IE <= 8
        else document.attachEvent('onreadystatechange', function(){
            if (document.readyState=='complete') callback();
        });
    }

    // cookie handling function block
    (function() {
        var cookie = function() {};
        cookie.set = function cookieSet(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+ d.toUTCString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=." + document.location.hostname;
        }
        cookie.get = function cookieGet(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for(var i = 0; i <ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return undefined;
        }
        window.cookie = cookie;
    })();



    // on dom ready check if message has not been seen yet - if not, set a cookie to remember
    (function() {
        ready(function() {
            if (cookie.get('cookieMsgSeen') !== 'yes')
            {
                cookie.set('cookieMsgSeen', 'yes', 365);
                document.getElementById('cookieMsgContainer').style.display = 'block';
            }
        });
    })();


</script>