JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<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>Задача открыть всплывающее окошко через 5 секунд</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;
}
#open {
    width:90px;
    border:1px solid #ccc;
    text-align:center;
    cursor:pointer;
}

JavaScript

$(".page").before('<div class="box"></div>'); // добавляем элемент на страницу
$('#modal, .box').hide(); // скрываем элементы
$('#modal, .box').delay(5000).fadeIn(300); // выведет окно через 5 секунд
$('#close, .box').click(function () {
    $('#modal, .box').fadeOut(300, function () {
        $('#modal, .box').hide(); // спрятали при клике
    });
});