Всплывающее модальное окно по таймеру
 | |
| Интересное решение для появление окна или баннера, что при открытие страница или сайта появится всплывающее окно с кнопкой закрытия через 10 секунд. Думаю вы уже встречали такой эффект, где заходя на сайт, вы остаетесь на нем, но потом по заданному времени появляется баннер или окно, что теперь вы можете у себя на портале создать. Где вы задаете время, и по заданному счетчику появится красивое модальное окно с информацией или рекламой, здесь много направлений. Также здесь закреплена demo-страница, где открывая окно вы не чего не найдете, но как только пройдет десять секунд, то по центру появится окно. Основном можно наблюдать данный эффект в интернет магазинах, чтоб привлечь пользователя, где он находит информацию, и здесь ему показываем тот информационный поток, который заранее был приготовлен для каждого пользователя или гостья сайта. Дизайн не важен, так как идет стилистика, и можно изменить, здесь главное эффект. Пример заданного дизайн окна:  Установка: HTML Код <div id="modnoye_okno"> <p>Здесь идет описание или установлен виджет</p> <a id="kaxalon_oyena" href="#close">Закрыть</a> </div> CSS Код #modnoye_okno { display: none; position: fixed; z-index: 9999999; background: #FFF; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 700px; width: 100%; text-align: center; padding: 10px 20px; border: 4px solid #337AB7; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } #kaxalon_oyena { display: inline-block; margin: 10px 6px 4px 6px; text-decoration: none; position: relative; font-size: 16px; padding: 8px 16px; color: #FFF; font-weight: bold; text-transform: uppercase; background: #337AB7; } #kaxalon_oyena:hover { color: #FFF; } #kaxalon_oyena:after, #kaxalon_oyena:before { position: absolute; height: 2px; left: 50%; background: #337AB7; bottom: -6px; content: ""; transition: all 280ms ease-in-out; width: 0; } #kaxalon_oyena:before { top: -6px; } #kaxalon_oyena:hover:after, #kaxalon_oyena:hover:before { width: 100%; left: 0; } JS Он откроет через 10 секунд модальное окно с ID modnoye_okno Код setTimeout(function(){ const modalwin = document.getElementById('modnoye_okno'); modalwin.style.display="block"; document.getElementById("kaxalon_oyena").addEventListener("click", function(){ modalwin.style.display="none"; }); }, 10000); А также есть вариант на один показ с использованием cookie. Код function getCookie(name) { let matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } let mcookie = getCookie("mcookie"); if (mcookie != "no") { setTimeout(function(){ const modalwin = document.getElementById('modnoye_okno'); modalwin.style.display="block"; document.getElementById("kaxalon_oyena").addEventListener("click", function(){ modalwin.style.display="none"; // записываем cookie на 1 день, с которой мы не показываем окно let date = new Date; date.setDate(date.getDate() + 1); document.cookie = "mcookie=no; path=/; expires=" + date.toUTCString(); }); }, 10000); } Как понимаете, мы создаем скрытую информацию, которая может нести не только знаки для прочтение, также не исключаю, что может появится разный виджет. Как уже говорил в описание, здесь тама полностью не раскрыта, все только знают, что появление рекламного баннера. Но можно задать временной отрезок, где на страницы написать, что через 15 минут вам будет предоставлен, как пример ключ активации. Просто недавно покупал, и там точно по такому варианту мне предоставили ключь для антивируса. Но это просто полет фантазий, ведь у каждой тематике есть свои секретные фишки, которые не нужно сразу раскрывать. И данный код появление окна по таймеру, будет отличным решением. PS - небольшая информация по данному материалу добавлена в архиве в текстовом документе, что возможно кому будет неинтересно, ведть это дополнительные варианты, что можно к основе добавить. Демонстрация Источник: atuin.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
