CP_cookies

use cookie to hide element

HTML

<div id="overlay" class="cover blur-in">
        <div class="content"></div>
    </div>
    <div class="row pop-up">
        <div class="box small-6 large-centered">
            <a href="#" class="close-button">✖</a>
            <h3 class="popup">Welcome</h3>
            <p>info </p>
            <p>info</p>
            <a href="#" class="button">press for facebook</a>
        </div>
    </div>

CSS

.cover {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 1;
        }

        .blur-in {
            -webkit-animation: blur 2s forwards;
            -moz-animation: blur 2s forwards;
            -o-animation: blur 2s forwards;
            animation: blur 2s forwards;
        }

        .blur-out {
            -webkit-animation: blur-out 2s forwards;
            -moz-animation: blur-out 2s forwards;
            -o-animation: blur-out 2s forwards;
            animation: blur-out 2s forwards;
        }

        @-webkit-keyframes blur {
            0% {
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -o-filter: blur(0px);
                -ms-filter: blur(0px);
                filter: blur(0px);
            }

            100% {
                -webkit-filter: blur(4px);
                -moz-filter: blur(4px);
                -o-filter: blur(4px);
                -ms-filter: blur(4px);
                filter: blur(4px);
            }
        }

        @-moz-keyframes blur {
            0% {
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -o-filter: blur(0px);
                -ms-filter: blur(0px);
                filter: blur(0px);
            }

            100% {
                -webkit-filter: blur(4px);
                -moz-filter: blur(4px);
                -o-filter: blur(4px);
                -ms-filter: blur(4px);
                filter: blur(4px);
            }
        }

        @-o-keyframes blur {
            0% {
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -o-filter: blur(0px);
                -ms-filter: blur(0px);
                filter: blur(0px);
            }

            100% {
                -webkit-filter: blur(4px);
                -moz-filter: blur(4px);
                -o-filter: blur(4px);
                -ms-filter: blur(4px);
 ...

JavaScript

$(document).ready(function () {

            if (Boolean(readCookie('hide'))) {
                $('.pop-up').hide();
                $('.pop-up').fadeOut(1000);
            }
            $('.close-button').click(function (e) {

                $('.pop-up').fadeOut(700);
                $('#overlay').removeClass('blur-in');
                $('#overlay').addClass('blur-out');
                e.stopPropagation();

                createCookie('hide', true, 1)
                return false;
            });

            function createCookie(name, value, days) {
                if (days == 1) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    var expires = "; expires=" + date.toGMTString();
                }
                else var expires2 = "";
                document.cookie = name + "=" + value + "; expires=" + expires + "; path=/";

              //  $.cookie(name, value, { expires: days });
            }

            function readCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }

            function eraseCookie(name) {
                createCookie(name, "", -1);
            }

        });