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