Всплывающее окно при загрузке сайта с помощью CSS3 и небольшого javascript


Всплывающее окно при загрузке сайта с помощью CSS3 и небольшого javascript

Всем нам блуждающим по просторам глобальной сети попадались на глаза сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма или же форма обратной связи.
Можно по разному относиться к таким методам подачи информации. Меня например, все эти всплывающие окна выскакивающие во время посещения какого-нибудь сайта, мягко сказать напрягают, да что там, они меня просто бесят, хочется сразу уйти, покинуть этот сайт, что в большинстве случаев я и делаю. Да и все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. Но, как мы видим, многие, очень многие веб-мастера реализуют именно такой, навязчивый способ подачи информации.

Всплывающее окно при загрузке сайта

Меня больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и совсем небольшого javascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.

Для начала, не отходя от кассы, на специально приготовленной демо-странице, вы можете посмотреть на конечный результат всего того что мы будем с вами делать. В примере, в всплывающем окне я использовал текст и парочку изображений, для наглядности. Вы же в последствии сможете вставить в модальное окно все что угодно, главное не переусердствуйте )))).

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:

Модальное Окно!

Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.

Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.

Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1

Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом . Ну а сам скрипт состоит всего лишь из нескольких строк:

В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.

Для закрытия окна мы просто используем стандартную кнопку, тег с onclick событием и определенным классом для возможности оформления внешнего вида через стили CSS.

Таким образом мы подошли к самому интересному моменту(на мой взгляд), к формированию стилей всплывающего окна.

Стили CSS

Для начала, создадим идентификатор #overlay с помощью которого мы свяжем наше окно с javascript и сформируем базовый контейнер

Для основы нашего окна выставляем фиксированное положение position: fixed; , то есть, если вы будете прокручивать страницу при открытом окне, оно остаётся на месте. Зададим чёрный цвет для фона и добавим ему лёгкую прозрачность с расширением на весь экран. За счет использования свойства z-index , фон располагается поверх всех остальных элементов.
В завершении, с помощью свойства display: none; , скроем его до момента активации javascript.

Теперь, давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока.

С помощью свойств CSS3 можно как угодно сформировать внешний вид всплывающего окна, например использовать функцию линейного градиента для фона, или же различные виды трансформации. При этом правда не следует забывать, что не все браузеры одинаково хорошо справляются с обработкой новых свойств CSS3.

Закрываем окно

На завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаем класс close и начинаем оформлять кнопку закрытия:

Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки, делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении, определяемся с изменением цвета фона при наведении курсора мыши на кнопку.

Все! Дорогие друзья. Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «шнягу-шняжную» и уж тем более блокировать возможность закрытия окна.

Уважайте своих пользователей и они к вам потянутся.

А может и это вам будет интересно:

Некоторые добавления:

После написания статьи, самый популярный вопрос в комментариях — как прикрутить к этому окну запись cookie, чтобы оно являлось взору пользователя при первом заходе на сайт, или же с определённым интервалом. Вариантов много и разных. Чтобы закрыть вопрос, расскажу о самом распространённом, с использованием библиотеки jQuery и плагина jquery.cookie.js.
Всё что вам нужно, это иметь подключёнными библиотеку jQuery и плагин jquery.cookie.js к вашему документу Html.

jQuery подключаете из бездонных хранилищ Google, а плагин Cookie можно загрузить c сайта плагинов jQuery и разместить у себя на сайте в папке «js» (например).
Далее подключаете файл javaScript, содержащий код работы с cookie, или же включаете текст скрипта в HTML код с помощью тега , вот так:

Исполняемый js лучше всего прописать перед закрывающим тегом . В данном примере я показал вариант сохранения cookie после закрытия всплывающего окна в течении семи дней, это означает, что окно будет показано пользователю при первом посещении, один раз. На протяжении последующих семи дней, или до момента пока пользователь не почистит куки своего браузера, окно показываться не будет.
Как вы понимаете, обработчик события записи cookie, вы можете привязать к любому другому элементу. Время хранения куки устанавливаете в expires: 7 (в примере это 7 дней). Задержку появления окна регулируете в функции setTimeout , по умолчанию выставил 5000, т.е окно всплывёт через 5 секунд после загрузки страницы.

Обновление от 27.10.2017:

Сосем немного изменил внешний вид модального окна, прикрутил простейшую анимацию появления, с помощью изменения свойства прозрачности (opacity) от 0 к 1. К демо, добавил и вариант всплывающего окошка с записью cookie, при просмотре, не забывайте, что окно в этом варианте появляется 1 раз в 7 дней, так что чистим куки))).

По поводу оформления:
Примеров создания модальных окон, накропал за последнее время на небольшую коллекцию, так что смотрите, выбирайте понравившийся стиль и творите, творите…

Устали от поиска первоклассных русифицированных шаблонов? В таком случае, вам определенно стоит посетить маркетплейс TemplateMonster, где теперь можно найти самые разные HTML шаблоны на русском языке для самых разных сфер деятельности. Локализованные шаблоны порадуют вас во всевозможных аспектах. Конечно же, речь идет о разнообразных инструментах, которые сделают процесс создания сайта более быстрым и простым. К тому же, не стоит забывать, что тексты для данных шаблонов были написаны вручную.

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 219

Все получилось, спасибо!
А какой стиль прописать, что бы окно всплывало плавнее?

Добрый вечер!
Статья заточена на то, чтобы использовать как можно меньше javascript и тем самым обойти блокировку всплывающих окон при первой загрузке сайта. Материал создавался в качестве эксперимента, так как я очень негативно отношусь ко всякого рода всплывающей хрени при загрузке страниц, развивать эту тягомотину нет никакого желания))). Вы же можете реализовать задуманное с помощью полноценных плагинов jQuery, благо описаний данной техники исполнения навалом в инете. Надеюсь «гугля» вам поможет.
Удачи!

Все работает! спасибо! наконец-то я поняла как это делается. Только вот у меня окошко уплывает под шапку сайта. Как это поправить?

Nigrata
Скорее всего стоит поэкспериментировать со значением margin: 10% auto; , меняя процентное отношение или исключая auto из расчета размера отступов. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Удачи!

Отличная статья. Без лишних заморочек.
Огромное спасибо!

Все работает, спасибо. Вопрос, как подкорректировать css для отображения стиля в IE? И вот решение вопроса заданного ифsy:
if (document.cookie.indexOf(‘_visited=1’) == -1) var delay_popup = 5000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup);
document.cookie = ‘_visited=1; path=/’;>

Приветствую. Преогромное спасибо за поп ап.
А как бы на этом окне разместить кнопку с функцией «больше не показывать»?

Здравствуйте. Разместить кнопку несложно, главное чтобы она выполняла свои функции, а это уже совсем другая история)))

СПАСИБО БОЛЬШОЕ! ЗАМЕЧАТЕЛЬНАЯ СТАТЬЯ!

Рад, что вам понравилась моя работа.

Здравствуйте. Интересует преобразование этого способа под следующую задачу:
открытие окна (скажем по IP адресу один раз одному пользователю)
в нем стоит подписка на новости и никаких возможностей его закрыть — пока человек не подпишется. При нажатии Подписаться — он переходит на другую конкретную страницу.
Или подскажите другой способ решения этой задачи.
Спасибо!

С виду всё отлично! Спасибо за урок!!
А можно ли реализовать автоматическое закрытие окна, допустим через 10 секунд?

setTimeout(function() document.getElementById(‘parent_popup’).style.display = ‘none’;
>, 10000);
setTimeout(function() document.getElementById(‘parent_popup’).style.display = ‘none’;
>, 10000);

Ух ты! Спасииибо.
буду ставить

Все же вы бы не могли дать код js с запоминанием куки на 1 день хотя бы, тоесть чтобы человек раз в день видел это окно ?

Нет не мог бы. Я предложил лишь свой вариант создания всплывающих окон при загрузке сайта, в обход блокировки браузерами, как эксперимент, и не горю желанием развивать эту тему, так как очень негативно отношусь к применению навязчивой подачи информации. По вашему вопросу, достаточно инфы, стоит только поискать.

Андрей здравствуйте!
Нужна ваша помощь в следующем вопросе. Хочу сделать всплывающее окошко которое появляется при попытке закрытия сайта с предложением получить бесплатный урок и переадрессацией на форму подписки.
Работаю в программе Веб Билдер (WYSIWYG) объясните пожалуйста доступным языком для непонятливых =)
Спасибо! =)

Здравствуйте Михаил.
Как вы понимаете в комментариях я не могу расписать весь процесс создания таких окошек. В инете полно решений данного вопроса, достаточно вбить в поиск фразу: «всплывающее окно при закрытии страницы». Нужно понимать, что современные браузеры, неособо любят подобного рода функционал и всячески стараются блокировать, навязчивые уведомления, тем более если они как-то препятствуют пользователю делать свободный выбор, в данном случае, это желание покинуть сайт.
Все эти окошки и перенаправления, раздражают и желание вновь посетить сайт с такими прибамбасами, отбивают напрочь. Но движуха в таком направлении, это ваш выбор, так что ищите, истина всегда где-то рядом.

Огромное спасибо! Все получилось!
Теперь бы как-нибудь добавить функцию появления экрана один раз в день/в неделю/в месяц.

Ищите, да обрящите! Существуют методы показа всплывающего окна с блокировкой по cookie, посмотрите здесь: Тынц>>, не совсем то что вам надо, но чем черт не шутит.
Удачи!

Спасибо за урок! Не могли бы Вы подсказать как сделать что бы данный скрипт был перед всплывающим окном?
Снег на сайт (второй вариант)

если кому интересно то вот решение (помогли на другом форуме):
в файле со всплывающим окном изменить:
z-index: 99998;
а в javascript у снега поставить:
var zIndex = 99999;

Alexander
Спасибо, надеюсь, ваша информация пригодится многим.

Большое спасибо! Подскажите пожалуйста, как сделать, чтобы окно, открывалось только на главной странице?

Здравствуйте.
Разместите окно и исполняющий js только на главной. Не знаю какой вы используете движок, не знаю структуру ваших шаблонов, много чего не знаю, играть в гадалки, как-то в последнее время меня уже не особо вставляет. Разместите блок всплывающего окна там где вы его хотите видеть, на статичных сайтах это просто, c CMS немного сложнее, но тоже вполне выполнимая задача.

Всем привет. Очень нравиться это окно всплывающее, но прописать у меня его не получается. Может кто поможет…

Подскажите как сделать, что бы окно всплывало только при первом посещении сайта?

Замените действующий javascript:



В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))

Замените действующий javascript:
var delay_popup = 5000;
setTimeout («document.getElementById (‘parent_popup’).style.display=’block’», delay_popup);
На такой:
$(function () if (document.cookie.indexOf (‘_visited=1’) == -1) var delay_popup = 3000;
setTimeout («document.getElementById (‘parent_popup’).style.display=’block’», delay_popup);
document.cookie = ‘_visited=1; path=/’;
>
>);
В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))

Не работает такой код. Библиотеки дополнительные подключать не нужно?

Респект автору…красава
большое спасибо за код
Я искал парился никак на джумлу не мог воткнуть, кучу перерыл тут за пару секунд
спасибо!

У себя на сайте http://worldrc.ru/ сделал с cookie:
Берем код jquery (если еще не подключена) и cookie от яндекса и подключаем в header:
Далее ваш скрипт подключаем в подвале:
Полезно. Прочитайте.

$(function() // Проверим, есть ли запись в куках о посещении посетителя
// Если запись есть – ничего не делаем
if (!$.cookie(‘was’))

var delay_popup = 5000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup);

>
// Запомним в куках, что посетитель к нам уже заходил
$.cookie(‘was’, true, expires: 365,
path: ‘/’
>);
>)
$(function() // Проверим, есть ли запись в куках о посещении посетителя
// Если запись есть – ничего не делаем
if (!$.cookie(‘was’)) var delay_popup = 5000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup);
>
// Запомним в куках, что посетитель к нам уже заходил
$.cookie(‘was’, true, expires: 365,
path: ‘/’
>);
>)

Ну и все стили в файл стилей.
Только после этого заработало.

Заработало вот с таким скриптом:

$(function() if (document.cookie.indexOf(‘_visited=1’) == -1) $.cookie (‘_visited’, 1,

>);
var delay_popup = 3000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup);

>
>);
$(function() if (document.cookie.indexOf(‘_visited=1’) == -1) $.cookie (‘_visited’, 1, < expires: 30, path: ‘/’ >);
var delay_popup = 3000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup); >
>);

Спасибо, обязательно возьмём на заметку ваш вариант.

Доброго времени суток такой вопрос как сделать чтобы окно всплывало сразу просто происходит задержка в течение 4 секунд заранее спасибо

Здравствуйте. Попробовал вариант с куки от driver .Все работает, Только вот хотел спросить, а как сделать чтоб время жизни куки было 1 день?

Спасибо, отлично работает.

Здравствуйте. Подскажите пожалуйста как сделать так чтоб после нажатия кнопки «подробнее» или закрыть баннер больше не показывался.

Здравствуйте. Используйте обработку cookie, как, читайте предыдущие комменты и выберите подходящий вариант, парочка решений точно описана.

Здравствуйте. Огромна просьба помочь, а то целую неделю мучаюсь. все сделал так как у Вас, но скрипт c куки использую этот

if ($.cookie(‘viewed_banner’) != $(‘#parent_popup p’).text()) $(‘#parent_popup’).show();
$(‘.close’).on(‘click’, function() $(‘#parent_popup’).hide();
$.cookie(‘viewed_banner’, $(‘#parent_popup p’).text(), < expires: 1, path: ‘/’ >);
>);
$(‘.button’).on(‘click’, function() $(‘#parent_popup’).hide();
$.cookie(‘viewed_banner’, $(‘#parent_popup p’).text(), < expires: 1, path: ‘/’ >);
>);
>
if ($.cookie(‘viewed_banner’) != $(‘#parent_popup p’).text()) $(‘#parent_popup’).show();
$(‘.close’).on(‘click’, function() $(‘#parent_popup’).hide();
$.cookie(‘viewed_banner’, $(‘#parent_popup p’).text(), < expires: 1, path: ‘/’ >);
>);
$(‘.button’).on(‘click’, function() $(‘#parent_popup’).hide();
$.cookie(‘viewed_banner’, $(‘#parent_popup p’).text(), < expires: 1, path: ‘/’ >);
>);
>

но к сожалению баннер не запускается.

Добрый день. Подскажите пожалуйста, какой код написать чтоб с мобильного телефона баннер не запускался?

Просто отказаться от него, особенно если как у вас, баннер навязывается пользователям, без возможности закрытия, развивать эту тему у меня нет никакого желания (((

Здравствуйте. Подскажите пожалуйста а как сделать так чтобы форма закрывалась
при клике за пределами формы (при клике в любом месте страницы). Заранее спасибо!

Достаточно в продублировать функцию закрытия окна:

Должно получиться следующее:

А можно сделать, чтобы оно открывалось только 1 раз при заходе на сайт?

Не один раз об этом писал в комментариях: Тынц »

Спасибо! Всё работает…Но у меня возникла следующая ситуация, которую я сам исправить не способен…Итак, в всплывающее окно я разместил выпадающий список (select) на Javascript… Всё ок! Но теперь не пойму как добиться закрытия окошка после выбора какой-либо из строчек в списке…

Artur.
Специально не озадачивался, но думается мне, что логично будет добавить ссылкам из выпадающего списка событие

по крайней мере, это логично, вот только не знаю, как отреагирует «ваш» javascript, хотя всё должно сработать

Супер! Все работает и все максимально просто без лишних скриптов. Спасибо!

Павел, спасибо за отзыв!

Как сделать чтобы это убиралось с ваодом кода в поле в окне?

Добрый день, а подскажите пожалуйста, как вызывать этот попам при клике на ссылку на странице? (тобишь что ставить в href). Извиняюсь за глупый вопрос, но в коде я очень слаб.
Заранее спасибо за ответ!

День добрый. Всё очень просто, воспользуйтесь одним из этих вариантов: Тынц

Спасибо за ответ, в ближайшее время обязательно внедрю!

Спасибо за твой сайт. не передать словами.
пробовал подключить к своему сайту — все получилось
подрубил библиотеку суков и сработал вот этот код
$(function() // Проверим, есть ли запись в куках о посещении посетителя
// Если запись есть – ничего не делаем
if (!$.cookie(‘was’)) var delay_popup = 5000;
setTimeout(“document.getElementById(‘parent_popup’).style.display=’block’”, delay_popup);
>
// Запомним в куках, что посетитель к нам уже заходил
$.cookie(‘was’, true, expires: 365,
path: ‘/’
>);
>)
Вопрос:
Как сделать так чтобы в куки записывалось только после нажатия «кнопки» или «крестика», а не при обновлении повторно страницы (т.е в куки пишется сразу без выполнения действий)

Здравствуйте, Николай.
Раз уж вы подключили jQuery в работу, то для начала давайте немного подправим саму кнопу закрытия, теперь она будет выглядеть так:
X
Обратите внимание на id=”setCookie” , идентификатор с помощью которого мы привязываем кнопку с функцией записи cookie.
Теперь остаётся выправить js:
$(document).ready(function() $(“#setCookie”).click(function() $.cookie(“popup”, “24house”, expires: 1
>);
$(“#parent_popup”).hide();
>);
if ($.cookie(“popup”) == null) setTimeout(function() $(“#parent_popup”).show();
>, 5000)
> else $(“#parent_popup”).hide();
>
>);
Время жизни cookie выставляете в expires: 1 , я поставил сутки, меняйте на своё усмотрение. Задержка появления в setTimeout 5000 — соответствует 5 секундам. Ну а через .show и .hide соответственно показываем и скрываем окно.
Всё! Теперь не будет показывать в течении суток, если пользователь нажал на кнопку закрыть или любой другой элемент имеющий id=”setCookie” .

много экспериментировал, решил написать и увидел что обновили статью, но не работает.
кнопка
« Продолжить »>
крестик
X
при нажатии на кнопку все работает. но при нажатии на «крестик» ничего не происходит. Если добавить в «крестик» href=”/” то событие обрабатывается но запись в куки не происходит.
подключаю не скриптом а

Все супер. Все на столько доступно, что я с первого раза все сделал за пол часа (никогда ранее не открывал CSS), один только вопрос, у меня почему-то нет крестика «закрыть», вместо него лишь круглешок, что я упустил? Но все равно ОГРОМНЕЙШЕЕ СПАСИБО за доступно написаную статью.

Все супер. Точно, упустил «Х» ))) Все работает именно так, как я и хотел. Спасибо.

Здравствуйте. Подскажите пожалуйста, как скрыть показ модального окна на мобильных устройствах или изменить параметры отображения (размеры). Это важно для предварительного ознакомления пользователя с ресурсом и никоим образом не используется в целях рекламы.
С уважением

Здравствуйте, Назар.
Скрыть показ модального окна на мобильных устройствах можно с помощью медиа-запросов CSS. Например, чтобы окно не всплывало на экранах менее 470px используйте следующее:
@media screen and (max-width: 470px) #parent_popup, #popup < display: none !important;>
>
Так же вы можете сделать окошко более-менее резиновым, выставив значения ширины в процентах и указав максимально возможный размер. В селекторе #popup пропишите базовую ширину примерно width: 60%; , а максималку выставите в зависимости от размера содержания, обычно это 500-600px max-width: 600px; , высота окна будет вычисляться автоматом.

Спасибо большое за ваши доступные уроки для таких как я! Только теперь я столкнулся с тем, что в выплывающем окне не могу разместить форму обратной связи, сервисы которыми я пользовался ранее, стали платными, да и формы созданные там отображаются «ломая» окно, может вы подскажете, как создать свою рабочую форму обратной связи, что бы она и отображалась правильно, и отправляла письма на МОЙ почтовый ящик? Образец, которого я добился сейчас, (можно увидеть на сайте: http://www.cleaner-master.ru) меня вполне бы устроил внешне, но он почему то не работает((( Пишет недоступно, и письма не отправляет((( Пожалуйста, помогите мне если это возможно, думаю многим пригодится)))

Проверил отправку сообщений через вашу форму, обработчик выдаёт что сообщение отправлено.
С внешним видом формы поработаю в ближайшее время.

Буду очень благодарен))) Буду очень ждать))) И если бы вы сделали какую нибудь симпатичную кнопочку вашего ресурса, стандартного размера 88×31, я бы с удовольствием разместил бы предлагаемый вами html код с адресом кнопочки ссылающейся на ваш великолепный сайт)))

Это лучшее, что я видела на эту тему в интернете. СПАСИБО!

Подскажите, как добавить форму отправки имени и email через это всплывающее окно? Спасибо.

Вот беда! Начала внедрять, а окно не работает. Движок wordpress. Похоже полностью не работают в стилях parent_popup — нет затемнения, окно находится просто внутри странцы, а не поверх. С чем это может быть связано я не знаю, может вы сможете помочь?

Попробуйте увеличить значение свойства z-index в селекторе #parent_popup

Увы! увеличение z-index не помогает, да он и так оч большой. Где-то конфликт или настоление…но я не знаю как найти… Очень жаль. Очень хорош Ваш вариант, главное такой простой!

Я извиняюсь! Была банальная опечатки в стилях. А я неделю про z-index читала))) Все прекрасно работает! Спасибо огромное!
Вот только на мобильном окно не закрывается при нажатии на крестик. Получается что оно висит и закрыть его никак нельзя. Как думаете, в чем может быть причина?

Добрый день,
Спасибо за полезные решения, которые я периодически использую! %)
Подскажите пожалуйста, как сделать так чтоб после закрытия такого попапа пользователя не кидало в начало страницы. Ато выходит, что после того как человек пролистал пол страницы, появляется попап, он его закрывает, и снова в самом начале. Возможно ли сделать так, чтоб он оставался на том месте, куда долистал?)
Спасибо за то, что Вы делаете!

Супер четкие решения, оба работают, спасибо.
Теперь пользователи как минимум на нескольких моих сайтах не будут так по 100500 раз пролистывать всю страницу!)

Рад, что всё у вас получилось. Побывав у вас на сайте, заметил, что форма записи на курсы, сваливается за пределы футера(подвал сайта), происходит это из-за лишнего внутреннего отступа слева, в селекторе .footer_left исключите padding-left: 50px; , или же присвойте нулевое значение, и всё встанет на свои места.
Удачи!

Всё работает. Спасибо

А на 1 с битриксе можно использовать это решение?)

и куда его вставлять что бы он всплывал на главной?) в index?)

Это зависит от того на чём у Вас сайт. Если на html, тогда в index.html, если на DLE то скорее всего в home.tpl. Для самописа какого нибудь это может быть index.php.tpl. Для фреймворка макссайт можно в папке home в файл text.php вписать.

Подскажите, пожалуйста, как сделать, чтобы окно закрывалось при клике вокруг окна, а не только по крестику? Спасибо.

Отвечал уже в комментах: Тынц

Приветствую Вас! Хотел поставить модальное окно на сайте по Вашей инструкции. Всё заработало сразу. но окно открывалось после загрузки любой страницы. Привязать к кукам так и не получилось. Окно открывается, но никак не хочет закрываться. В чем может быть проблема?

Почему-то решение с куками работает по-разному на разных сайтах. На одних закрытие действует для всех страниц, а на других только для той страницы где закрыли.

Заметил, что такое поведение кукисов есть лишь у сайтов на хостинге VESTA, у них ещё панель своя какая-то.

Всё сделал , всё работает . Интересует как реализовать такое . На сайте есть карточки товара , которые размещены во всплывающих окнах. Как сделать что бы по определенной внешней ссылке (например: mydomen/pop-up1.php открывалось нужное всплывающее окно с карточкой товара.Карточек порядка 20 штук. Подскажете ?

Здравствуйте! Подскажите пожалуйста, как реализовать данный метод на движке opencart.
В принципе все установил и работает, но окно появляется каждый раз при обновлении страницы или открытии новой. Куки не работают, может кто поможет?

Здравствуйте!
Никак не могу заставить попап открываться с заданной периодичностью для одного пользователя (не чаще раза в N дней). Целый день гуглю, ваш пост — самое близкое по теме, но у меня попап на fancybox реализован немного по-другому. Пожалуйста, помогите адаптировать, а то я уже скоро с ума сойду!
Вот какой код у меня используется:
В :



Перед :

popup.html — файл, который содержит код попапа. Проблема в том, что попап появляется при каждой перезагрузке страницы. Никак не могу адаптировать ваш метод использования cookie к этому примеру. Вы моя последняя надежда!

Вот так всегда бывает, только попросишь помощи, и сразу ответ находится 🙂 Нашел решение на одном форуме, ссылку не даю, чтобы не сочли за спам.

А как сделать так, чтобы окно открывалось, но его можно было бы прокручивать вместе со страницей?

Здравствуйте! А как Ваш пример реализовать так, чтобы всплывающее окно появлялось только на главной странице?

Разместите код только для главной страницы и все

Здравствуйте, перезалейте ссылку для скачивания файлов, она не рабочая

Спасибо, Денис.
Ссылку на архив с исходниками поправил )).

Спасибо, статья супер, разобраться не сложно)

Omar, спасибо за интерес к статье и ваш отзыв.

Доброго времени суток, уважаемый автор! Большое спасибо за эту статью! Очень полезная статься. У меня правда возникла небольшая проблема. Я попробовал данную функцию добавить на сайт, который работает на третьей джумле, причем на шаблоне JA Mediacare, в котором есть слайдер и он перестал работать. Если убрать подключение jquery
то слайдер начинает работать, но не появляется модальное окно 🙂
подскажите, пожалуйста, куда копать?

Скорее всего у вас конфликт между двумя версиями jQuery. Попробуйте вместо $(function() написать
$(document).ready(function() или jQuery(function($) . Если не поможет, то костыль в виде jQuery.noConflict (); И лучше всё же, библиотеку jQuery включать один раз.

помогло jQuery (function ($)) — спасибо большое! 🙂
собственно заработала та библиотека, которая была уже подключена для какого-то расширения джумлы, дополнительно подключать не пришлось

Спасибо огромное! Промучился 2 дня. jQuery (function ($) помогло. Дополнительно библиотеку не подключал

Статья очень полезная, большое спасибо автору!)
в скриптах я не сильно разбираюсь, поэтому прошу помощи
у меня в таком модальном окне есть кнопка. Как сделать так, чтобы окно выскакивало до тех пор, пока человек не нажмет на эту кнопку?
Буду очень благодарна!

Здравствуйте, Евгения.
Попробуйте прикрутить запись cookie к вашей кнопке. Соответственно с кнопы закрытия запись cookie снимите, т.е уберите из тега ссылки. В одном из ответов на комментарии, всё подробно расписал: тынц

Разобралась. Спасибо большое!
И что отвечаете так оперативно тоже спасибо)

Здравствуйте.
Спасибо за рабочий пример. Все супер. Но я решил переделать его на модальные окна бустрап и столкнулся с проблемой: не могу корректно добавить запись для куки.
сам запуск модального окна бустрап (через 3 секунды) не проблема:
$(document).ready(function() setTimeout(function() $(‘#UvedomlenieModal’).modal(‘show’);
>, 3000);
>);
а вот как сюда добавить куки?
Спасибо.

Не гарантирую на все сто, что сработает, но в принципе тоже самое:
$(document).ready(function() if (!$.cookie(‘hideModal’)) setTimeout(function() $(‘#UvedomlenieModal’).modal(‘show’);
>, 3000);
>
$.cookie(‘hideModal’, true, // Время хранения cookie в днях
expires: 7,
path: ‘/’
>);
>);
Время хранения cookie, соответственно выставите своё, 7 дней это для примера.

Гораздо проще использовать не cookie а возможность HTML5 sessionStorage. В обработку события нажатия кнопки добавить «onclick=»document.getElementById (‘overlay’).style.display=’none’;sessionStorage.setItem (‘of’,’true’);”. А в сам скрипт добавить условный оператор:”
if (!sessionStorage.getItem (‘of’)) var delay_popup = 5000;setTimeout («document.getElementById (‘overlay’).style.display=’block’», delay_popup);
>
“.
Таким образом окно будет появляться один раз в пределах сессии.

Ох, если бы вы еще объяснили для самых-самых… Звучит все красиво, а что куда вставлять, не понятно. Лично у меня с куками не вышло и возможно ваш способ проканал бы.

В коде окна, в теге добавляете в обработчик события onklick следующий код: sessionStorage.setItem(‘off’,’true’); .
В итоге код окна будет такой:

Модальное Окно!

Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.

Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.

Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1

Ниже в сам скрипт добавляете условный оператор if:

благодарю, Ваш способ помог (исправил только события для стандартных в бутстраппе)
вышло так
$(document).ready(function() if (!$.cookie(‘hidden.bs.modal’)) setTimeout(function() $(‘#UvedomlenieModal’).modal(‘show’);
>, 3000); // с задержкой 3 секунды
>
$.cookie(‘hidden.bs.modal’, true, expires: 1, // Время хранения cookie в днях
path: ‘/’
>);
>);
где #UvedomlenieModal это ID модального окна.
сам код модального окна для наглядности

Добрый день.
Спасибо большое за такой пример очень понятно и просто! Подскажите пожалуйста как с помощью Вашего примера можно закрывать это модальное окно не только кнопкой «закрыть», но и кликом на область вне модального окна, то есть по любому месту сайта, что-то всю голову поломал, так и не понял как это сделать 🙁
Спасибо большое!

Спасибо за отзыв. По поводу вашего вопроса, отвечал уже в комментах: Тынц

Доброго вечера!
Вопрос может и не совсем в тему, но тем не менее, долгое время пробую сам, но все бесполезно, хочу узнать, может вы мне подскажете, как сделать красивую смену фото в шапке сайта по примеру: school-plav14.ru , очень хочу такое же, но что то не получается…
Может у вас есть исходники?

Спасибо за статью, полностью рабочая…подскажите только как установить закрытие модального окна по любой точке на экране вне самого popup,и с помощью клавиши esc.

Для закрытия вне окна, достаточно для продублировать событие onclick, должно получиться следующее:

Для закрытия по клавише Esc, если вы используете вариант на jQuery, с записью cookie, в исполняемый js необходимо добавить следующую функцию:

$(this).keydown(function(eventObject) if (eventObject.which == 27)
$(‘#overlay’).hide();
>);
$(this).keydown(function(eventObject) if (eventObject.which == 27)
$(‘#overlay’).hide();
>);

Пропишите её в конец, перед последним >); и надеюсь всё у вас получится.
PS: Архив обновил, внесены некоторые изменения и исправлены мелкие ошибки.

Спасибо, код работает! —
Кусок кода для esc, не удалось запустить, сайт написан на joomla, на котором установлен компонент widgetkit, в котором есть собственная библиотека jQuery, при в вписывании вашего кода для esc, код не отрабатывает, но это не большая проблема, главное что по клику закрывает.
Подскажите еще одну вещь, как сделать чтобы при закрытии модального окна был легкий эффект затемнения, как при открытии, так как сейчас окно мгновенно закрывается…пробовал сделать также через jQuery, класов fadeOut но он у меня тоже не отрабатывает.

Большое спасибо за статью — благодаря ей исправила свои ошибки!
Но, к сожалению, на сайте так и не нашла рабочего кода, который бы контролировал частоту появления модального окна раз в заданный период или раз в сессию(

За отзыв спасибо.
Контролировать частоту появления модального окна в заданный период, можете с помощью jQuery.cookie, в статье подробно всё расписано. В примере я выставил ограничение показа для одного пользователя 1 раз в 7 дней(неделя), вы же можете задать от 1 дня до года(365). Окно будет показано пользователю 1 раз в заданный период, или пока товарищ, не удалит cookie в своём браузере.

У меня тоже не получилось с куки (

Перво наперво проверьте, задействована ли у вас на сайте библиотека jQury:

Подключён ли плагин jQuery.cookie.js:

Ну,и в исполняемом js, постарайтесь избежать ошибок, и уверен, всё у вас заработает.
И ещё, если у вас какой-нибудь модуль/плагин подключает jQuery, может возникнуть конфликт между двумя версиями jQuery, исправить просто: Тынц

и не понял куда нужно вставить эту строку что бы окно закрывалось при нажатии в любом месте

Что же здесь непонятного? У меня нет особого желания, через комментарий отвечать на один и тот же вопрос: смотрите, читайте…

День добрый, Ваш вариант всплывающего окна то что я искал)
Вроде все получилось с куками, на denver работает.
Хотел бы спросить, как можно сделать автозакрытие и срок хранения не в днях а в часах, к примеру мне нужно показать окно 1 раз в 3 часа.
Спасибо за своевременный ответ!

$(document).ready(function() // Проверяем запись в куках о посещении
// Если запись есть – ничего не происходит
if (!$.cookie(‘hideModal’)) // если cookie не установлено появится окно
// с задержкой 5 секунд
setTimeout(function() $(‘#overlay’).css();
>, 5000);
//10000 – миллисекунды через сколько произойдет закрытие
setTimeout(‘$(“#overlay”).hide();’,10000);
>
var date = new Date();
// срок хоанения cookie в минутах
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie(“hideModal”, “foo”, < expires: date >);
>);
Окно появляется через 5 секунд, закроется через 10 со времени загрузки страницы, 10000 — 5000 = 5000, значит будет на виду 5 секунд, как выставить нужный интервал, думаю понятно.
Срок храгнения cookie в минутах, для примера выставил 30 минут, т.е. полчаса
Добавил комментарии в код, надеюсь разберётесь

Спасибо Вам огромное! Все работает!

А можно еще поинтересоваться? А я вот к примеру хочу туда всунуть резиновый баннер, как так сделать чтобы края самого окна были на 10-15px больше самого резинового баннера, но не более к примеру 350px по ширине или это уже из области фантастики? )

Ой, спасибо, добрый человек!
Обшарила сеть в поиске простого модального окна на сайт, зарылась в дебри JS и jQuery — караул!
А все не то что надо попадалось. А у Вас в блоге сразу просто, быстро, все с первого раза работает.
Еще раз мерси.
Запостила на Google+ и в facebook.
Толковый сайт — добавила в закладки.
Желаю процветания и успеха!

Добрый вечер.
Спасибо большое. То, что нужно.
Успехов.

Спасибо за эту статью. Очень пригодилась

Здравствуйте. Хотелось бы реализовать всплывающее окно при попытке ухода посетителя с сайта . То есть , когда курсор мыши покидает рабочую область сайта , то должно всплывать окно с предложением . Само окно уже есть , вопрос как его запустить при попытке выхода с сайта ? Спасибо .

Вопрос из серии “как быстро убить свой сайт”. Моё отношение к такого рода фичам однозначно — ЗЛО!
Но раз уж, вам так оно надо, гугля выложит вам кучу готовых решений, достаточно правильно задать запрос: тынц

Искала много раз подходящее модальное окно, уже оставляла попытки найти, а тут вот оно :))
Благодарю за простую версию.
Есть пару вопросов:
1. Как решить всплывающее окно в мобильной версии сайта?
2. Цвет кнопки закрытия у меня у меня почему-то белое.
Не пойму что мешает отобразить заданный цвет (я сменила Ваш зеленый на Оранж, а при клике вместо красного на голубой, под цвета моего сайта)

Диана, спасибо за отзыв.
Кнопке закрытия присвоен класс .close , у вас в bootstrap.css присутствует класс с таким же именем, отсюда и конфликт. Просто обзовите класс .close кнопы как-нибудь по другому, например .close-modal , соответственно проделайте это как в html, так и в css. Селекторы в css у вас будут такие .close-modal , .close-modal:before и .close-modal:hover . Всё, теперь разукрашивайте кнопу, как хотите.
При просмотре в эмуляторе мобильных устройств, окошко отображается корректно, просто в вашем случае оно всплывает немного не там )), для .popup замените абсолютное позиционирование position: absolute; на фиксированное position: absolute; и проверьте, что получится.

не могу сделать по кукам, дайте ваш скайп либо еще где нибудь связаться с вами

Спасибо большое превосходное рабочее решение ! А главное работающее восхитительно !

Привет, код прекрасный, все зашибись. Но, как можно сделать чтобы окно всплывало только тем кто новый посетитель ,как на сайте есть окно prntscr.com/bnt3ky. Посмотрите пожалуйста: vsedlyavanny.kz/shop/Dushevie_kabini/

Здравствуйте, Артём.
В принципе достаточно прикрутить к окошку jquery.cookie.js, и установить время хранения cookie в днях expires: 365 , что равно 1 году. Соответственно при заходе нового посетителя на сайт окно будет показано пользователю 1 раз в заданный период (1 год), или пока товарищ, не почистит cookie в своём браузере.

Спасибо, то что надо! Долго искал такое решение. Легкий и понятный скрипт.
Привинтил только кусочек с cookies к тому, что ранее было слеплено.
$(function () if (!$.cookie (‘hideModal’)) setTimeout (function () $(«#popup»).fadeIn (4000)>, 3500);
$(«#popup-close»).click (function (e) $.cookie (‘hideModal’, true, // Время хранения cookie в днях
expires: 1,
path: ‘/’
>);
>);
>
>);

Спасибо за отзыв. Рад, что вам пригодилось.

АКЦИЯ

Поделись нашей страничкой,на своей страничке в социальной сети, сфотографируй на свой мобильный,покажи нам и получишь скидку 10% на АБСОЛЮТНО ЛЮБОЙ УНИТАЗ в нашем магазине!

$(function () if (!$.cookie (‘hideModal’)) setTimeout (function () $(«#popup»).fadeIn (4000)>, 3500);
$(«#popup-close»).click (function (e) $.cookie (‘hideModal’, true, // Время хранения cookie в днях
expires: 1,
path: ‘/’
>);
>);
>
>);
?>
Помогите пожалуйста, вроде все слепил прилепил но не работает): видимо я совсем чайник…

Здравствуйте, Артём.
Зачем себе всё усложнять? Почему не сделать всё как в статье, раз уж вы используете данную разметку для мод. окна
Достаточно в setTimeout указать правильный id (‘overlay’)

$(function() // Проверяем запись в куках о посещении
// Если запись есть – ничего не происходит
if (!$.cookie(‘hideModal’)) // если cookie не установлено появится окно
// с задержкой 5 секунд
var delay_popup = 5000;
setTimeout(“document.getElementById(‘overlay’).style.display=’block’”, delay_popup);
>
$.cookie(‘hideModal’, true, // Время хранения cookie в днях
expires: 1,
path: ‘/’
>);
>);
$(function() // Проверяем запись в куках о посещении
// Если запись есть – ничего не происходит
if (!$.cookie(‘hideModal’)) // если cookie не установлено появится окно
// с задержкой 5 секунд
var delay_popup = 5000;
setTimeout(“document.getElementById(‘overlay’).style.display=’block’”, delay_popup);
>
$.cookie(‘hideModal’, true, // Время хранения cookie в днях
expires: 1,
path: ‘/’
>);
>);

Ну, и конечно, у вас должна быть подключена библиотека jQuery и сам плагин jquery.cookie.js для обработки cookie

У меня идет конфликт jquerry библиотек, что делать?

Видимо fancybox, подтягивает, или вы сами подключаете повторно фреймворк jQuery и происходит конфликт между двумя версиями.
Могу предложить несколько вариантов решения:
1. Оставьте одну версию библиотеки jQuery, лучше которая подтягивается с гугла например.
2. Попробуйте в начале js окна вместо $(function() прописать $(document).ready(function () или jQuery(function($)
3. Есть ещё костыль в виде jQuery.noConflict, но как правило он редко помогает…

То что нужно. Спасибо за статью — беру на вооружение. Как раз сейчас делаю такую фишку чтобы была всплывашка с видео при открытии сайта и кукисы жили 1 день. Еще раз спасибо!

может подскажет сделал такое окно движок джумла шаблон Rt Ximenia Responsive записал все это в модуле, вобщем не работаю куки без куков просто вызов скрипта все работает а куки не сохраняются, как их правильно подключить в джумле

Спасибо то что нужно. Но у меня небольшой касяк. Если вставлять кликабельную картинку в окне, то при попытке закрытия окна происходит переход по этой ссылке.
Пример:

Модальное Окно!

Да, совершенно верно, мой касяк. Теперь все супер!
Еще вопрос, как сделать переход по своей ссылке при закрытии окна/нажатия крестика?

Здраствуйте Уважаемый!
Ставлю Вашу конструкцию на DLE-не работает.Можете объяснить почему?
Вот скрин

Здравствуйте.
Судя по скрину у вас напрочь отсутствуют подключаемые стили css, которые в демо прописаны в разделе в секции

, других причин не вижу

Спасибо заработало!
Добавил Ваш код к этому
ниже и заработало.
Буду дальше мудрить-хочу вставить в Ваше окно подписку от FeedBurner.

скажите, пожалуйста, можно ли сделать на такое всплывающее окно анимированную загрузку страницы? я вот читаю принцип проделки таких страниц в блоге http://shneider-host.ru/blog/animaciya-zagruzki-stranicy-v-drupal-7.html, но не могу понять применимо ли это ко всплывающим. помогите!

driver, привет, спасибо за статью!
А как сделать так, чтобы куки выставлялись только тогда, когда показалось всплывающее окно?
Я хочу, чтобы оно показывалось через 20 секунд чтения статьи. Если посетитель сайта на первой странице провел 15 секунд, то при переходе на следующую страницу окошко уже не покажется 🙁

Спасибо, отличная статья, то что я искал!

Спасибо! Самое классное окошко, что я видела. Все отлично работает.

Спасибо большое за всплывающее окно, прикрутил, использую… безумно благодарен!
Может кто подскажет как сделать, чтобы окно появлялось не 1 раз в день или неделю, а раз в час допустим.
Заранее спасибо!

Здравствуйте, Алексей.
Если вы используете вариант с jQuery, попробуйте так:
$(document).ready(function() // Проверяем запись в куках о посещении
// Если запись есть – ничего не происходит
if (!$.cookie(‘hideModal’)) // если cookie не установлено появится окно
// с задержкой 5 секунд
setTimeout(function() $(‘#overlay’).css();
>, 5000);
>
// Определяем срок хранения cookie
var date = new Date();
// срок хоанения cookie в минутах
var minutes = 60;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie(“hideModal”, “foo”, < expires: date >);
>);
Срок хранения cookie в минутах, для примера выставил 60 минут, т.е. окно будет показано 1 раз и в течении часа уже не будет надоедать пользователю.
Добавил комментарии в код, надеюсь разберётесь.
PS: На локалке скорее всего не сработает, проверяйте в онлайн

И снова огромное спасибо! Всё работает прекрасно!
P.S. один маленький вопрос. когда на сайте перемещаюсь по другим страницам, куки автоматически обновляются и срок появления всплывающего окна отодвигается.
Зашел к примеру на сайт:
Создано: среда, 31 мая 2017 г., 13:35:00
Срок действия: среда, 31 мая 2017 г., 14:05:00
Через 2 минуты обновил старницу:
Создано: среда, 31 мая 2017 г., 13:37:00
Срок действия: среда, 31 мая 2017 г., 14:07:00
надеюсь изложил суть своей проблемы понятно 🙂

Хорошая статья, а как сделать что бы окно появлялось только с 22:00 до 8:00 с задержкой секунд 20 после загрузки всей страницы?

В Google Chrome необходимо вставить в div свойство style=”display: none” Иначе содержимое div выводится.

Вот прямо сейчас, тупо раз десять прогнал демку в Chrome, всё работает как надо, у базового контейнера с id=”overlay” , в котором располагается модальное окошко с содержанием, свойство display: none; прописано по-умолчанию, активируется с помощью js по истечении заданного времени (в демо это 5 секунд). Так что, скорее всего, что-то вы делаете не так

Доброго времени суток. Подскажите пожалуйста хотел сделать рекламу на сайте в сплывающем окне. К примеру чтоб всплывало окно не однократно: через 15 секунд, 1 минуту и т.д. Все сделал по инструкции только само модульное окно чтоб показывала разную рекламу, установил в движке в «Рекламных материалах» но к моему удивлению в заданные участки времени показывают одну и туже рекламу, хотя установлена разная

Здравствуйте, подскажите, пожалуйста, как сделать, чтобы окно всплывало только на главной странице (сайт на joomla, вставила в index.php и при переходе на любую страницу сайта всплывает окошко)?

Здравствуйте, Екатерина.
Не помню уже где, когда и зачем, но искал решение похожей проблемы, нарыл тогда парочку вариантов:
Вариант 1

// здесь выводим все, что хотим показать на главной

Вариант 2

// здесь выводим все, что хотим показать на главной

За работоспособность данных конструкций не ручаюсь, так что…

Доброго времени! кто поможет поставить?
Ну или объяснит как его поставить?!

Здравствуйте, JD1.
Верите или нет, даже вот и не знаю, что тут можно ещё объяснять. В самой статье да и в комметах, давно уже всё разложено по полкам.

Я извиняюсь за столь тупой вопрос конечно!) но у меня движок STRESSWEB и я просто не понимаю как его туда поставить! он просто не работает)
Благодарю за понимание!

Мне бы подошло такое всплывающее окно, только с более сложным условием: всплывающее окно должно появляться по нажатию на кнопку, если в статье отсутствует произвольное поле со ссылкой (сайт на Вордпрессе) — «К данной статьи нет дополнительных материалов». У меня почти к каждой статье есть материалы, поэтому в коде к статье вставил php-функцию, которая выводит содержание произвольного поля (ссылку на дополнительные материалы).
Заранее благодарю автора или тех, кто поможет прописать такой код)

у меня конструкция if (!$.cookie(‘hideModal’)) <. >срабатывала без задержек, и при заходе на любую страницу создавалась кука, при переходе в браузере на другие страницы модальное уже не появлялось, пришлось дописывать
var delay_cookie = delay_popup + 1000;
setTimeout(“$.cookie(‘hideModal’, true, < expires: 365, path: '/' >);”, delay_cookie);

Суперское решение. Вопрос глупый, но как сделать чтобы окно скрывалось при клике по фону?

Вернее, onclick=”document.getElementById (‘overlay’).style.display=’none’;” не подходит, т.к. закрытие проиисходит и по клику на всплывающее окно, а у меня там форма отправки, поэтому мне нужно чтобы окно закрывалось только по клику фона.

Ответ на мой вопрос, если кому интересно:
$(«.popup»).click (function (e) e.stopImmediatePropagation ();
>);

Подскажите пожалуйста где этот код прописать?
Ответ на мой вопрос, если кому интересно:
$(«.popup»).click (function (e) e.stopImmediatePropagation ();
>);
PS я плохо разбираюсь

Добрый день!
А есть возможность сделать так, чтоб на мобильной версии сайта окно не появлялось?

У меня само всплывающее окно не появляется, но при этом куки работают
Помогите пожалуйста

Здравствуйте, Yusuf.
Дело в том, что не видя пациента, трудно его лечить)).
Чтобы вам помочь, мне нужно видеть ваши исходники

Андрей, спасибо за материал!
Все у меня получилось. Кроме одного… Окно появляется через 5 секунд не плавно, а мгновенно.
100 раз пересмотрел текст. Вынес стили в отдельный файл. Не могу понять, где ошибка.
Поможете?

Здравствуйте, Александр.
Это мой косяк, в статье, при последнем обновлении, в примере кода пропустил @keyframe
Соответственно и Вы упустили правило @keyframe (устанавливает ключевые кадры при анимации элемента), по-крайней мере, в вашем файле my_modal.css его нет.
Добавьте в конец файла my_modal.css следующие строки:

/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade from < opacity: 0; >
to < opacity: 1 >
>
@-webkit-keyframes fade from < opacity: 0; >
to < opacity: 1 >
>
@keyframes fade from < opacity: 0; >
to < opacity: 1 >
>
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade from < opacity: 0; >
to < opacity: 1 >
>
@-webkit-keyframes fade from < opacity: 0; >
to < opacity: 1 >
>
@keyframes fade from < opacity: 0; >
to < opacity: 1 >
>

Ну, а я внесу изменения в статью.
Надеюсь всё у вас получится )).

Спасибо за ответ!
Вставил этот текст в css и все заработало.
Собственно, вчера еще смотрел код вашей страницы, видел эти «кракозябры». Но так как я еще достаточно далек от css, то не понял что это такое и не придал этому значение. Еще раз спасибо! Буду разбираться теперь как это все работает!

Дай Бог тебе здоровья, добрый человек!

Спасибо большое! Классная вещь)

да одно из лучших исполнений автоматического модального окна, уже поставил на три сайта, огромная благодарность за код

При первом запуске из демо и исходниках сразу пишет в куку, что окно закрывалось.

Добрый вечер!
Не удается заставить cookie работать.
что у Вас значит hideModal ? Где мы его определяем?

hideModal у меня это ничто иное как логичное (на мой взгляд) имя cookie, определяем его в if (!$.cookie(‘hideModal’)) и $.cookie(‘hideModal’, true, . При посещении сайта проверяется запись в куках о посещении, если запись с именем hideModal отсутствует, загрузится модальное окно, если запись есть — ничего не произойдёт

Виджет из VK не выводится почему то в этом модальном окне.

Проверил, виджеты комментариев и рекомендаций, например, выводятся без проблем, с авторизацией через vk, да, какие-то непонятки есть, другие не смотрел

Добрый день! Спасибо за полезную статью, все работает. Но у меня возникла проблема. После открытия модального окна (есть запускаемые через определенное время, есть запускаемые по нажатию на текст) они остаются в «памяти». То есть: открыла я окно, закрыла окно и если я буду нажимать на кнопку «назад» на странице, то все мою 100500 открытий и закрытий этого окна появляются по шагам. Расскажите, пожалуйста, как избавиться от этой напасти.

День добрый!
Обратите внимание на другое решение, в котором используются скрытые чекбоксы и нет надобности в ссылках и свойстве :target соответственно Тынц »
С оформлением окошек и анимацией разберётесь без труда.

Спасибо! Это именно то, чего я и хотела!) Все работает как нужно.

Я безмерно счастлива, и безмерно благодарна этой статье, я уже всю голову сломала как же сделать чтобы модальное окно не вылезло при обновлении страницы и вот оно!Огромнейшее спасибо! Не передать словами как я счастлива)


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *