JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<div id='dialog'>
    Lorem ipsum dolor sit amet.
    <a class='close' href='#'>&#215;</a>
</div>

CSS

#dialog {
  background-color:#ffa500;
  border:5px solid #222;
  box-shadow:0px 1px 3px black;
  position:absolute;
  top:-100px;
  left:50%;
  z-index:999;
  width:260px;
  height:140px;
  margin:-70px 0px 0px -150px;
  padding:15px;
  color:white;
}

a.close {
  color:white;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  position:absolute;
  top:10px;
  right:14px;
}

JavaScript

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else {
        var 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);
}


$(function() {

    // Tampilkan kotak dialog saat halaman telah termuat
    $(window).load(function() {
        $('#dialog').animate({top:($(window).height()/2)-20}, 400, "swing");
    });

    // Saat tombol tutup diklik, sembunyikan kotak dialog dengan efek .fedeOut()
    // dan buat kuki dengan nama "hideDialog" dengan waktu kadaluarsa 7000 hari
    $('a.close').click(function() {
        $(this).parent().fadeOut('fast');
        createCookie("hideDialog", "hide", 7000);
        return false;
    });

    // Digunakan saat kuki sudah tercipta
    // Saat kuki "hideDialog" terbaca, singkirkan kotak dialog
    if(readCookie("hideDialog")) {
        $('#dialog').remove();
    }

});