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