kseosru,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.parent_popup {
position: fixed;
right: 30px;
bottom: -180px;
width: 400px;
transition: 1.2s;
}
.parent_popup.show{
bottom: 5px;
}
.popup {
width: 100%;
height: 100px;
background: #f8f8f8;
padding: 6px 10px 10px 10px;
box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-webkit-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-moz-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
margin: 0 0 20px 0;
position: relative;
right: 0;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 12px;
-webkit-border-radius:12px; /* Safari, Chrome */
-moz-border-radius:12px; /* Firefox */
}
.close {
display: none;
}
.close:hover {
display: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function c() {
a = b[i], a.classList.add("show"),i = ++i % b.length, e = window.setTimeout(d, 1000) //время просмотра
}
function d() {
window.clearTimeout(e);
a && a.classList.remove("show");
window.setTimeout(c, 2000) //пауза между показами
}
var b = document.querySelectorAll(".parent_popup"),
e, a, b = [].slice.call(b, 0), i = 0;
window.setTimeout(c, 1000) //пауза перед 1 запуском
});
</script>
</head>
<body>
<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 1
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 2
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
</body>
</html>