JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="http://jquery.page2page.ru/ui/jquery.cookie.js"></script>
<div class="page">
    <div id="open">Открыть</div>
    <div id="modal">
        <div id="close" title="закрыть">x</div>
        <p>Бла бла бла бла бла</p>
        <p>Бла бла бла бла бла</p>
        <p>Бла бла бла бла бла</p>
        <p>Бла бла бла бла бла</p>
    </div>
    <p>Задача открыть всплывающее окошко через 2 секунд если нет куки</p>
</div>

CSS

#modal {
    position:absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
    padding:10px;
    width:300px;
    height:200px;
    border:2px solid #ccc;
    background:#fff;
    z-index:999;
}
#modal img {
    width:100%;
    height:100%;
}
#close {
    float:right;
    cursor:pointer;
}
.box {
    position:absolute;
    background: rgba(225, 0, 0, 0.5);
    width:100%;
    height:100%;
    z-index:9;
}

JavaScript

var chekCookie = $.cookie('result'); // создали переменную для проверки cookie

// Проверяем если не был записан, записываем и показываем блок
if (chekCookie == null) {
    $.cookie('result', 'cookie_value', {expires:1}); // срок жизни куки 1 сутки
    $(".page").before('<div class="box"></div>'); // добавляем элемент на страницу
$('#modal, .box').hide(); // скрываем элементы
$('#modal, .box').delay(2000).fadeIn(300); // выведет окно через 2 секунд
$('#close, .box').click(function () {
    $('#modal, .box').fadeOut(300, function () {
        $('#modal, .box').hide(); // спрятали при клике
    });
});

} else {
    $('#modal, .box').remove(); // если кукисы есть то скрываем блок
}