Рандомные всплывающие окна

В сайтостроении могут прибегать к реализации самый различные или даже непонятным задачам. Трудно предугадать что может понадобиться, к примеру, для лендинга, сайта-визитки и прочих видов ресурса. И исходя из этого в этом небольшом обзоре, я поделюсь функцией для рандомных всплывающих окон.

То есть вы создаете необходимое количество блоков с какой-либо информацией. Когда пользователь попадает на ваш ресурс, то через установленное время начинаются всплывать по одному окна (блоки) в случайном порядке. Где это может пригодиться? Это уже решать вам).

Посмотреть демо

jQuery

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
(function randomFade() {
        var fadeDivs = $('.cmcmodal'),
                el = fadeDivs.eq(Math.floor(Math.random() * fadeDivs.length));
                el.delay(800).fadeIn(500).delay(4000).fadeOut(500,randomFade);
})();
</script>

CSS

.cmcmodal {
        display:none;
        width: 35%;
        position: fixed;
        bottom:0%;
        left:50%;
        transform:translate(-50%, -50%);
        padding: 20px;
        background:        rgba(0,0,0,0.8);
        box-shadow: 0 10px 30px        rgba(0,0,0,0.3);
        box-sizing: border-box;
        border-radius: 20px;
        z-index:9999;
}
@media (max-width: 775px) {
.cmcmodal {
        width: 100%;
}
.blokava img {
        width: 65px;
}
}
.blokava img {
        float: left;
        border-radius: 15px;
        margin-right: 15px;
}
.vbcent{
        display: table;
        margin: 0 auto;
}
.vbcent > div {
        display: table-cell;
        vertical-align: middle;
        text-align:left;
}
.bloktext p{
        color: #fff;
        line-height: 1.4;
        font-size: 14px;
        margin: 0;
}
.bloktext b{
        color: #FF8500;
}

HTML


<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img1.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-1</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img2.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-2</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img3.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-3</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img4.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-4</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img5.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-5</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img6.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-6</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img7.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-7</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img8.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-8</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img9.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-9</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img10.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-10</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>
<div class="cmcmodal">
   <div class="vbcent">
      <div class="blokava"><img src="img11.jpg"></div>
      <div class="bloktext">
         <p><b>Название блока. Блок-11</b></p>
         <p>Часто бывает так, что смысл текста не имеет большого значения, а важен только его объем или структура.</p>
      </div>
   </div>
</div>

Читайте также: