Показать сообщение отдельно
  #2 (permalink)  
Старый 29.03.2018, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 29.03.2018 в 23:37.
Ответить с цитированием