Модификации

Как сделать случайное открытие попапа из списка по нажатию на кнопку

2025-11-16 12:33 Pop-up Бесплатные

Инструкция

С помощью данной модификации вы можете настроить так, чтобы при нажатии на одну кнопку открывался один из нескольких попапов — в случайном порядке. Это удобно, если нужно, чтобы у разных пользователей (или при повторных кликах) отображались попапы с разными текстами, изображениями или призывами к действию.
1. Добавьте нужные попапы на страницу и задайте им в настройках ссылку #randowblk.
Важно: все попапы, которые должны открываться случайным образом, обязаны иметь именно эту ссылку.
2. Добавьте HTML‑блок T123 и поместите в него приведённый ниже код.
В коде в двух местах укажите через запятую все ID блоков попапов (#rec...) ваших попапов, которые будут участвовать в случайном выборе. Обратите внимание во втором случае rec нужно вставлять без #.
Не забудьте добавить к вашей кнопке ссылку #randowblk, чтобы попапы открывались при нажатии на неё.
<!-- Скрипт для случайного открытия попапа из списка по нажатию на кнопку на Tilda с сайта bulgkate.ru -->

<script>
$(document).ready(function(){
$('#rec, #rec').addClass('chooseblk').hide(); // В этом месте #rec замените на свои ID блоков попапов 

function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max));};
function showRandomBlock(){
    let blkSts = getRandomInt($('.chooseblk').length);
    
    $('.chooseblk').hide();
    $('.chooseblk:eq('+blkSts+')').show(); 
  
};
function revertBodyClasses(event) {
  if (event.type === 'click' && (($(event.target).hasClass('t-popup') && $(this).hasClass('chooseblk')) || ($(event.target).parents('.t-popup__close').length && $(this).hasClass('t-popup__close')))) {
    $('body').removeClass().addClass('t-body');
  }
}

$.each(['rec', 'rec'], function( i, l ){ // В этом месте rec замените на свои ID блоков попапов 
	var aBlock = document.getElementById(l);
	var aBlockClose = document.querySelector('#' + l + ' .t-popup__close.t-popup__block-close');
		
	aBlock.addEventListener('click', revertBodyClasses, false);
	aBlockClose.addEventListener('click', revertBodyClasses, false);
});
showRandomBlock();
$('a[href="#randowblk"]').click(function(e) {e.preventDefault();showRandomBlock()});

});
</script>