Имеется модальное окно и открывающая его кнопка
Если на странице есть ссылка или кнопка, например, "Получить скидку" или "Заказать обратный звонок", которая открывает модалку, и ее же нужно открыть автоматически через некоторое время, то используем простенький JS:
|
1 2 3 |
setTimeout(function(){ document.getElementById("modalopen").click(); }, 10000); |
Или на jQuery:
|
1 2 3 |
setTimeout(function(){ $("#modalopen").click(); }, 10000); |
Этот код кликнет по элементу с ID modalopen через 10 секунд.
Примеры таких окон можно поглядеть в темах:
Если используются плагины, такие как Fancybox или Magnific Popup, то все тоже самое.
Также не стоит забывать, что на открывающей окно ссылке или кнопке должен стоять используемый в скрипте ID.
Имеется только модальное окно
Если нужно показать по таймеру всплывающее окно, открывать которое со страницы нет необходимости, другими словами нет такой кнопки, то самый простой способ это ее создать.
Создаем скрытую ссылку и дальше все из предыдущего примера.
При использовании плагинов можно использовать более сложный вариант - использовать их методы.
Например, для Fancybox 4 код будет таким:
|
1 2 3 4 5 |
setTimeout(function(){ const fancybox = new Fancybox([ {src: "#modal-content"} ]); }, 10000); |
Он откроет через 10 секунд модальное окно с ID modal-content
Нет ни окна, ни кнопки
В этом случае можно подключить плагины лайтбоксов (Fancybox 3, более новый Fancybox 4, Magnific Popup и др.), использовать примеры модалок из этого блога (ссылки выше) или коды ниже:
HTML
|
1 2 3 4 |
<div id="modal-content"> <p>Текст</p> <a id="modal-close" href="#close">Закрыть</a> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
#modal-content { 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); } #modal-close { 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; } #modal-close:hover { color: #FFF; } #modal-close:after, #modal-close:before { position: absolute; height: 2px; left: 50%; background: #337AB7; bottom: -6px; content: ""; transition: all 280ms ease-in-out; width: 0; } #modal-close:before { top: -6px; } #modal-close:hover:after, #modal-close:hover:before { width: 100%; left: 0; } |
JS
|
1 2 3 4 5 6 7 |
setTimeout(function(){ const modalwin = document.getElementById('modal-content'); modalwin.style.display="block"; document.getElementById("modal-close").addEventListener("click", function(){ modalwin.style.display="none"; }); }, 10000); |
Или однократный показ с использованием cookie
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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('modal-content'); modalwin.style.display="block"; document.getElementById("modal-close").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); } |
Вариант работает только на задержку показа, куку не пишет, появляется на странице после обновления её...
А как сделать чтобы показывалось, к примеру, через 1 час?!
Время указывается в микросекундах, тут в примерах 10000 - это 10 секунд.
Больше спасибо за ваш код, все работает.
Вопрос, как правильно дописать в JS, чтобы модальное окно закрывалось не только по клику на #modal-close, но и по клику ВНЕ модального окна?
Этот код имеется в виду:
setTimeout(function(){ modalwin = document.getElementById('modal-content'); modalwin.style.display="block"; document.getElementById("modal-close").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);Ниже функции для клика на кнопку:
document.addEventListener( 'click', (e) => { if (!e.composedPath().includes(modalwin)) { // Тут тоже самое, что и по клику на кнопку. } });Здравствуйте.
А есть решения,чтобы все происходило тоже самое, но с открытием не модального окна, а с новой вклади браузера?
Спасибо.
Сделать можно, через клик например, но браузер будет блокировать.
Т.е. не открывать окно, а писать сообщение что он заблокировал окно.
У вас была статья на такую тему вот https://atuin.ru/blog/vsplyvayushhee-okno-pri-zakrytii-stranicy/
Подскажите пожалуйста как можно подключить функцию cookie. В смысле чтобы окно появлялось только 1 раз на всем сайте
Для последнего варианта (на который даны коды) я могу добавить вариант для разового открытия окна, а вот на все остальные - это зависит от используемых модальных окон.
Да, только для последнего варианта
Добавил
Огромное Спасибо
Через флаги
Делаешь примерно так
Const coc={
saveCoc:false,
}
После показа и принятия условий меняешь на true
И через if else прописывает условие не показывать, хранить в локал сторедж