JSFiddle - React, Tailwind, and code Playground

by Kai

CSS

.notice {
    position: relative;
    border-radius: 5px;
    background-color: #000;
    color: #ff0;
    padding: 5px 10px;
}

.notice-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-family: Verdana;
    font-size: .8em;
    font-weight: bold;
    cursor: pointer;
}

JavaScript

function displayNotice (key, value, content) {
    // Check for cookie and exit if exists
    if (readCookie(key) == value) { return; }
    
    // Create div, set content, add class, prepend to body and fade in
    $('<div></div>').html(content + '<span class="notice-close-btn">X</span>').addClass('notice').prependTo('body').hide().fadeIn('slow');
    
    // Add event handler to <span> to act as close button
    $('.notice-close-btn').click(function () {
        $(this).parent().fadeOut();
    });
    
    // Set cookie so this doesn't show up again
    createCookie(key, value, 7);
}

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

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);
}

displayNotice('betanotice', 'hide', 'Check out the beta!!!!!');