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

Категории: Уроки 02.12.2012 комментариев 219

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

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

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

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

Смотреть Демо

Разметка HTML

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

<!-- Модальное Окно  -->
<div id="overlay">
    <div class="popup">
        <h2>Модальное Окно!</h2>
        <p>
            Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения. 
         </p>
         <div class="pl-left">
               <img src="https://placeimg.com/320/320/tech">
         </div>
         <p>Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.</p>
         <div class="pl-right">
               <img src="https://placeimg.com/320/320/nature">
         </div>              
<p>Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.</p>
       <p>
           Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1
       </p>
        <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
    </div>
</div>

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

<script type="text/javascript">
        var delay_popup = 5000;
        setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
</script>

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

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

<button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>

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

Стили CSS

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

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}

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

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

.popup {
    top: 25%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}

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

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

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

.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
 
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}

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

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

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

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

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

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

<script type="text/javascript">    
$(function() {
  // Проверяем запись в куках о посещении
  // Если запись есть - ничего не происходит
     if (!$.cookie('hideModal')) {
  // если cookie не установлено появится окно
  // с задержкой 5 секунд
        var delay_popup = 5000;
        setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
     }
     $.cookie('hideModal', true, {
   // Время хранения cookie в днях
        expires: 7,
        path: '/'
   });
});
</script>

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

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

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

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

Демо 1 Демо 2 Скачать исходники

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

С Уважением, Андрей

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

Метки: css3 · javascript · всплывающее окно · модальное окно · уроки

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

kreolka_8: 16 декабря, 2012 в 19:56
Все получилось, спасибо!
А какой стиль прописать, что бы окно всплывало плавнее?
Ответить
- driver: 16 декабря, 2012 в 21:26
  Добрый вечер!
  Статья заточена на то, чтобы использовать как можно меньше javascript и тем самым обойти блокировку всплывающих окон при первой загрузке сайта. Материал создавался в качестве эксперимента, так как я очень негативно отношусь ко всякого рода всплывающей хрени при загрузке страниц, развивать эту тягомотину нет никакого желания))). Вы же можете реализовать задуманное с помощью полноценных плагинов jQuery, благо описаний данной техники исполнения навалом в инете. Надеюсь «гугля» вам поможет.
  Удачи!
  Ответить
Nigrata: 22 февраля, 2013 в 00:13
Все работает! спасибо! наконец-то я поняла как это делается. Только вот у меня окошко уплывает под шапку сайта. Как это поправить?
Ответить
- driver: 22 февраля, 2013 в 00:49
  Nigrata
  Скорее всего стоит поэкспериментировать со значением margin: 10% auto;, меняя процентное отношение или исключая auto из расчета размера отступов. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
  Удачи!
  Ответить
Валерий: 13 марта, 2013 в 15:15
Отличная статья. Без лишних заморочек.
Огромное спасибо!
Ответить
zamut: 9 апреля, 2013 в 12:44
Все работает, спасибо. Вопрос, как подкорректировать 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=/';}
Ответить
Quarter: 15 июня, 2013 в 17:59
Приветствую. Преогромное спасибо за поп ап.
А как бы на этом окне разместить кнопку с функцией «больше не показывать»?
Ответить
- driver: 4 июля, 2013 в 10:04
  Здравствуйте. Разместить кнопку несложно, главное чтобы она выполняла свои функции, а это уже совсем другая история)))
  Ответить
Дарья: 17 июня, 2013 в 16:22
СПАСИБО БОЛЬШОЕ! ЗАМЕЧАТЕЛЬНАЯ СТАТЬЯ!
Ответить
- driver: 4 июля, 2013 в 10:06
  Рад, что вам понравилась моя работа.
  Ответить
Наталья: 11 сентября, 2013 в 14:22
Здравствуйте. Интересует преобразование этого способа под следующую задачу:
открытие окна (скажем по IP адресу один раз одному пользователю)
в нем стоит подписка на новости и никаких возможностей его закрыть — пока человек не подпишется. При нажатии Подписаться — он переходит на другую конкретную страницу.
Или подскажите другой способ решения этой задачи.
Спасибо!
Ответить
Юлия: 17 сентября, 2013 в 00:10
С виду всё отлично! Спасибо за урок!!
А можно ли реализовать автоматическое закрытие окна, допустим через 10 секунд?
Ответить
- driver: 17 сентября, 2013 в 18:58
  Можно.
  
  setTimeout(function(){
  document.getElementById(‘parent_popup’).style.display = ‘none’;
  }, 10000);
  setTimeout(function(){
  document.getElementById(‘parent_popup’).style.display = ‘none’;
  }, 10000);
  Ответить
  - Юлия: 17 сентября, 2013 в 19:35
    Ух ты! Спасииибо!!!
    буду ставить
    Ответить
Иван: 12 ноября, 2013 в 11:32
Все же вы бы не могли дать код js с запоминанием куки на 1 день хотя бы, тоесть чтобы человек раз в день видел это окно ?
Ответить
- driver: 12 ноября, 2013 в 13:24
  Нет не мог бы. Я предложил лишь свой вариант создания всплывающих окон при загрузке сайта, в обход блокировки браузерами, как эксперимент, и не горю желанием развивать эту тему, так как очень негативно отношусь к применению навязчивой подачи информации. По вашему вопросу, достаточно инфы, стоит только поискать.
  Ответить
Михаил: 17 ноября, 2013 в 02:40
Андрей здравствуйте!
Нужна ваша помощь в следующем вопросе. Хочу сделать всплывающее окошко которое появляется при попытке закрытия сайта с предложением получить бесплатный урок и переадрессацией на форму подписки.
Работаю в программе Веб Билдер (WYSIWYG) объясните пожалуйста доступным языком для непонятливых =)
Спасибо! =)
Ответить
- driver: 17 ноября, 2013 в 13:09
  Здравствуйте Михаил.
  Как вы понимаете в комментариях я не могу расписать весь процесс создания таких окошек. В инете полно решений данного вопроса, достаточно вбить в поиск фразу: «всплывающее окно при закрытии страницы». Нужно понимать, что современные браузеры, неособо любят подобного рода функционал и всячески стараются блокировать, навязчивые уведомления, тем более если они как-то препятствуют пользователю делать свободный выбор, в данном случае, это желание покинуть сайт.
  Все эти окошки и перенаправления, раздражают и желание вновь посетить сайт с такими прибамбасами, отбивают напрочь. Но движуха в таком направлении, это ваш выбор, так что ищите, истина всегда где-то рядом.
  Ответить
ифsy: 28 ноября, 2013 в 16:39
Огромное спасибо! Все получилось!
Теперь бы как-нибудь добавить функцию появления экрана один раз в день/в неделю/в месяц.
Ответить
- driver: 28 ноября, 2013 в 17:24
  Ищите, да обрящите! Существуют методы показа всплывающего окна с блокировкой по cookie, посмотрите здесь: Тынц>>, не совсем то что вам надо, но чем черт не шутит.
  Удачи!
  Ответить
  - ифsy: 28 ноября, 2013 в 23:17
    спасибо! опробую 🙂
    Ответить
Alexander: 5 декабря, 2013 в 14:47
Спасибо за урок! Не могли бы Вы подсказать как сделать что бы данный скрипт был перед всплывающим окном?
Снег на сайт (второй вариант)
Ответить
Alexander: 6 декабря, 2013 в 14:30
если кому интересно то вот решение (помогли на другом форуме):
в файле со всплывающим окном изменить:
z-index: 99998;
а в javascript у снега поставить:
var zIndex = 99999;
Ответить
- driver: 6 декабря, 2013 в 14:40
  Alexander
  Спасибо, надеюсь, ваша информация пригодится многим.
  Ответить
Саня: 13 февраля, 2014 в 18:27
Большое спасибо! Подскажите пожалуйста, как сделать, чтобы окно, открывалось только на главной странице?
Ответить
- driver: 13 февраля, 2014 в 23:25
  Здравствуйте.
  Разместите окно и исполняющий js только на главной. Не знаю какой вы используете движок, не знаю структуру ваших шаблонов, много чего не знаю, играть в гадалки, как-то в последнее время меня уже не особо вставляет. Разместите блок всплывающего окна там где вы его хотите видеть, на статичных сайтах это просто, c CMS немного сложнее, но тоже вполне выполнимая задача.
  Ответить
Станислав: 22 марта, 2014 в 17:26
Всем привет. Очень нравиться это окно всплывающее, но прописать у меня его не получается. Может кто поможет…
Ответить
Сергей: 25 марта, 2014 в 11:01
Подскажите как сделать, что бы окно всплывало только при первом посещении сайта?
Ответить
- driver: 25 марта, 2014 в 17:58
  Замените действующий javascript:
  
  <script type=”text/javascript”>
  var delay_popup = 5000;
  setTimeout(“document.getElementById(‘parent_popup’).style.display=’block'”, delay_popup);
  </script>
  <script type=”text/javascript”>
  var delay_popup = 5000;
  setTimeout(“document.getElementById(‘parent_popup’).style.display=’block'”, delay_popup);
  </script>
  
  На такой:
  
  <script type=”text/javascript”>
  var delay_popup = 5000;
  setTimeout(“document.getElementById(‘parent_popup’).style.display=’block'”, delay_popup);
  </script>
  <script type=”text/javascript”>
  var delay_popup = 5000;
  setTimeout(“document.getElementById(‘parent_popup’).style.display=’block'”, delay_popup);
  </script>
  
  В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))
  Ответить
  - Дмитрий: 26 марта, 2014 в 13:45
    Замените действующий 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=/’;
    }
    });
    В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))
    
    Не работает такой код. Библиотеки дополнительные подключать не нужно?
    Ответить
    - driver: 26 марта, 2014 в 17:47 Ответить
    - Дмитрий: 26 марта, 2014 в 18:03 Ответить
    - driver: 26 марта, 2014 в 18:20 Ответить
    - Сергей: 29 марта, 2014 в 01:56 Ответить
Николай: 15 апреля, 2014 в 14:17
Респект автору…красава
большое спасибо за код
Я искал парился никак на джумлу не мог воткнуть, кучу перерыл тут за пару секунд
спасибо!
Ответить
Андрей: 8 июня, 2014 в 12:55
У себя на сайте 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: ‘/’
});
})

Ну и все стили в файл стилей.
Только после этого заработало.
Ответить
Антон: 25 июня, 2014 в 20:34
Заработало вот с таким скриптом:

$(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);

}
});
$(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); }
});
Ответить
- driver: 26 июня, 2014 в 09:09
  Спасибо, обязательно возьмём на заметку ваш вариант.
  Ответить
Аноним: 11 июля, 2014 в 13:22
Доброго времени суток такой вопрос как сделать чтобы окно всплывало сразу просто происходит задержка в течение 4 секунд заранее спасибо
Ответить
bukar: 18 июля, 2014 в 09:04
Здравствуйте. Попробовал вариант с куки от driver .Все работает, Только вот хотел спросить, а как сделать чтоб время жизни куки было 1 день?
Ответить
Ltybc: 3 сентября, 2014 в 09:13
Спасибо, отлично работает.
Ответить
dima: 12 сентября, 2014 в 16:14
Здравствуйте. Подскажите пожалуйста как сделать так чтоб после нажатия кнопки «подробнее» или закрыть баннер больше не показывался.
Ответить
- driver: 12 сентября, 2014 в 22:23
  Здравствуйте. Используйте обработку cookie, как, читайте предыдущие комменты и выберите подходящий вариант, парочка решений точно описана.
  Ответить
  - dima: 17 сентября, 2014 в 14:23
    Здравствуйте. Огромна просьба помочь, а то целую неделю мучаюсь. все сделал так как у Вас, но скрипт 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 октября, 2014 в 14:18
Добрый день. Подскажите пожалуйста, какой код написать чтоб с мобильного телефона баннер не запускался?
Ответить
- driver: 5 октября, 2014 в 22:35
  Просто отказаться от него, особенно если как у вас, баннер навязывается пользователям, без возможности закрытия, развивать эту тему у меня нет никакого желания (((
  Ответить
Abay: 11 октября, 2014 в 14:28
Здравствуйте!!! Подскажите пожалуйста а как сделать так чтобы форма закрывалась
при клике за пределами формы (при клике в любом месте страницы). Заранее спасибо!
Ответить
- driver: 13 октября, 2014 в 17:29
  Достаточно в <div id="parent_popup"> продублировать функцию закрытия окна:
  
  onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”
  onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”
  
  Должно получиться следующее:
  
  <div id=”parent_popup” onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”>
  <div id=”parent_popup” onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”>
  Ответить
Дмитрий: 10 ноября, 2014 в 19:15
А можно сделать, чтобы оно открывалось только 1 раз при заходе на сайт?
Ответить
- driver: 10 ноября, 2014 в 21:36
  Не один раз об этом писал в комментариях: Тынц »
  Ответить
Artur: 17 ноября, 2014 в 19:35
Спасибо! Всё работает…Но у меня возникла следующая ситуация, которую я сам исправить не способен…Итак, в всплывающее окно я разместил выпадающий список (select) на Javascript… Всё ок! Но теперь не пойму как добиться закрытия окошка после выбора какой-либо из строчек в списке…
Ответить
- driver: 18 ноября, 2014 в 00:47
  Artur.
  Специально не озадачивался, но думается мне, что логично будет добавить ссылкам из выпадающего списка событие
  
  onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”
  onclick=”document.getElementById(‘parent_popup’).style.display=’none’;”
  
  по крайней мере, это логично, вот только не знаю, как отреагирует «ваш» javascript, хотя всё должно сработать
  Ответить
Павел: 28 ноября, 2014 в 14:16
Супер! Все работает и все максимально просто без лишних скриптов. Спасибо!
Ответить
- driver: 28 ноября, 2014 в 18:19
  Павел, спасибо за отзыв!
  Ответить
nozuki: 5 февраля, 2015 в 02:47
Как сделать чтобы это убиралось с ваодом кода в поле в окне?
Ответить
Дмитрий: 8 марта, 2015 в 17:48
Добрый день, а подскажите пожалуйста, как вызывать этот попам при клике на ссылку на странице? (тобишь что ставить в href). Извиняюсь за глупый вопрос, но в коде я очень слаб.
Заранее спасибо за ответ!
Ответить
- driver: 8 марта, 2015 в 18:15
  День добрый. Всё очень просто, воспользуйтесь одним из этих вариантов: Тынц
  Ответить
  - Дмитрий: 15 марта, 2015 в 16:54
    Спасибо за ответ, в ближайшее время обязательно внедрю!
    Ответить
Николай: 30 марта, 2015 в 23:32
Спасибо за твой сайт. не передать словами.
пробовал подключить к своему сайту — все получилось
подрубил библиотеку суков и сработал вот этот код
$(function() { // Проверим, есть ли запись в куках о посещении посетителя // Если запись есть - ничего не делаем if (!$.cookie('was')) { var delay_popup = 5000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); } // Запомним в куках, что посетитель к нам уже заходил $.cookie('was', true, { expires: 365, path: '/' }); })
Вопрос:
Как сделать так чтобы в куки записывалось только после нажатия «кнопки» или «крестика», а не при обновлении повторно страницы (т.е в куки пишется сразу без выполнения действий)
Ответить
- driver: 31 марта, 2015 в 04:36
  Здравствуйте, Николай.
  Раз уж вы подключили jQuery в работу, то для начала давайте немного подправим саму кнопу закрытия, теперь она будет выглядеть так:
  <a id="setCookie" class="close" title="Закрыть">X</a>
  Обратите внимание на 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".
  Ответить
  - Николай: 3 апреля, 2015 в 02:34
    много экспериментировал, решил написать и увидел что обновили статью, но не работает.
    кнопка
    <a id="setCookie" class="button" title="Продолжить" href="/">« Продолжить »</a>>
    крестик
    <a id="setCookie" class="c1lose" title="Закрыть">X</a>
    при нажатии на кнопку все работает. но при нажатии на «крестик» ничего не происходит. Если добавить в «крестик» href="/" то событие обрабатывается но запись в куки не происходит.
    подключаю не скриптом а <script type="text/javascript" src="{THEME}/js/oko.js"></script>
    Ответить
    - Николай: 3 апреля, 2015 в 03:13 Ответить
Ден: 1 мая, 2015 в 21:27
Все супер!!! Все на столько доступно, что я с первого раза все сделал за пол часа (никогда ранее не открывал CSS), один только вопрос, у меня почему-то нет крестика «закрыть», вместо него лишь круглешок, что я упустил? Но все равно ОГРОМНЕЙШЕЕ СПАСИБО за доступно написаную статью!!!
Ответить
- driver: 1 мая, 2015 в 21:47
  Не знаю в чём у вас косяк, в роли символа кнопки закрытия банальная буква «X» ничего более:
  <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
  Ответить
  - Ден: 6 мая, 2015 в 13:51
    Все супер!!! Точно, упустил «Х» ))) Все работает именно так, как я и хотел!!! Спасибо!!!
    Ответить
    - driver: 6 мая, 2015 в 14:10 Ответить
Назар: 5 мая, 2015 в 18:06
Здравствуйте!!! Подскажите пожалуйста, как скрыть показ модального окна на мобильных устройствах или изменить параметры отображения (размеры). Это важно для предварительного ознакомления пользователя с ресурсом и никоим образом не используется в целях рекламы.
С уважением
Ответить
- driver: 6 мая, 2015 в 11:14
  Здравствуйте, Назар.
  Скрыть показ модального окна на мобильных устройствах можно с помощью медиа-запросов CSS. Например, чтобы окно не всплывало на экранах менее 470px используйте следующее:
  @media screen and (max-width: 470px){ #parent_popup, #popup { display: none !important;} }
  Так же вы можете сделать окошко более-менее резиновым, выставив значения ширины в процентах и указав максимально возможный размер. В селекторе #popup пропишите базовую ширину примерно width: 60%;, а максималку выставите в зависимости от размера содержания, обычно это 500-600px max-width: 600px;, высота окна будет вычисляться автоматом.
  Ответить
Ден: 10 мая, 2015 в 19:54
Спасибо большое за ваши доступные уроки для таких как я! Только теперь я столкнулся с тем, что в выплывающем окне не могу разместить форму обратной связи, сервисы которыми я пользовался ранее, стали платными, да и формы созданные там отображаются «ломая» окно, может вы подскажете, как создать свою рабочую форму обратной связи, что бы она и отображалась правильно, и отправляла письма на МОЙ почтовый ящик? Образец, которого я добился сейчас, (можно увидеть на сайте: http://www.cleaner-master.ru) меня вполне бы устроил внешне, но он почему то не работает((( Пишет недоступно, и письма не отправляет((( Пожалуйста, помогите мне если это возможно, думаю многим пригодится)))
Ответить
- driver: 10 мая, 2015 в 23:12
  Проверил отправку сообщений через вашу форму, обработчик выдаёт что сообщение отправлено.
  С внешним видом формы поработаю в ближайшее время.
  Ответить
  - Ден: 11 мая, 2015 в 00:11
    Буду очень благодарен))) Буду очень ждать))) И если бы вы сделали какую нибудь симпатичную кнопочку вашего ресурса, стандартного размера 88×31, я бы с удовольствием разместил бы предлагаемый вами html код с адресом кнопочки ссылающейся на ваш великолепный сайт)))
    Ответить
Наталья: 11 мая, 2015 в 09:53
Это лучшее, что я видела на эту тему в интернете. СПАСИБО!
Ответить
Дмитрий: 12 мая, 2015 в 13:10
Подскажите, как добавить форму отправки имени и email через это всплывающее окно? Спасибо.
Ответить
Наталья: 17 мая, 2015 в 12:15
Вот беда! Начала внедрять, а окно не работает. Движок wordpress. Похоже полностью не работают в стилях parent_popup — нет затемнения, окно находится просто внутри странцы, а не поверх. С чем это может быть связано я не знаю, может вы сможете помочь?
Ответить
- driver: 17 мая, 2015 в 12:59
  Попробуйте увеличить значение свойства z-index в селекторе #parent_popup
  Ответить
  - Наталья: 17 мая, 2015 в 20:31
    Увы! увеличение z-index не помогает, да он и так оч большой. Где-то конфликт или настоление…но я не знаю как найти… Очень жаль. Очень хорош Ваш вариант, главное такой простой!
    Ответить
    - Дмитрий: 19 мая, 2015 в 00:04 Ответить
    - driver: 19 мая, 2015 в 02:36 Ответить
  - Наталья: 20 мая, 2015 в 01:30
    Я извиняюсь! Была банальная опечатки в стилях. А я неделю про z-index читала))) Все прекрасно работает! Спасибо огромное!
    Вот только на мобильном окно не закрывается при нажатии на крестик. Получается что оно висит и закрыть его никак нельзя. Как думаете, в чем может быть причина?
    Ответить
    - Наталья: 20 мая, 2015 в 08:31 Ответить
Дмитрий: 30 мая, 2015 в 13:58
Добрый день,
Спасибо за полезные решения, которые я периодически использую! %)
Подскажите пожалуйста, как сделать так чтоб после закрытия такого попапа пользователя не кидало в начало страницы. Ато выходит, что после того как человек пролистал пол страницы, появляется попап, он его закрывает, и снова в самом начале. Возможно ли сделать так, чтоб он оставался на том месте, куда долистал?)
Спасибо за то, что Вы делаете!
Ответить
driver: 30 мая, 2015 в 15:49
В ссылке кнопки закрытия у вас прописан атрибут href=”#”, что конечно логично, на то это и ссылка, только вот решётка «#» по умолчанию служит якорем к началу страницы, так что или исключите href="#" из ссылки полностью, или пропишите что-то типа href="#close"
Ещё можно просто добавить return false; в событие onclick, тогда ссылка закрытия, применительно к вашему окну, будет выглядеть так:
<a title="Закрыть" href="#" onclick="document.getElementById('parent_popup').style.display='none'; return false;">×</a>
Остаётся только выбрать, какой вариант, для вас наиболее кошерный)))
Ответить
Дмитрий: 2 июня, 2015 в 16:52
Супер четкие решения, оба работают, спасибо!!!
Теперь пользователи как минимум на нескольких моих сайтах не будут так по 100500 раз пролистывать всю страницу!)
Ответить
- driver: 2 июня, 2015 в 22:17
  Рад, что всё у вас получилось. Побывав у вас на сайте, заметил, что форма записи на курсы, сваливается за пределы футера(подвал сайта), происходит это из-за лишнего внутреннего отступа слева, в селекторе .footer_left исключите padding-left: 50px;, или же присвойте нулевое значение, и всё встанет на свои места.
  Удачи!
  Ответить
Сергей: 12 июня, 2015 в 13:40
Всё работает. Спасибо
Ответить
Руслан: 29 июня, 2015 в 21:57
А на 1 с битриксе можно использовать это решение?)
Ответить
Руслан: 29 июня, 2015 в 22:40
и куда его вставлять что бы он всплывал на главной?) в index?)
Ответить
- 4545: 23 августа, 2015 в 21:32
  Это зависит от того на чём у Вас сайт. Если на html, тогда в index.html, если на DLE то скорее всего в home.tpl. Для самописа какого нибудь это может быть index.php.tpl. Для фреймворка макссайт можно в папке home в файл text.php вписать.
  Ответить
Евгений: 30 июня, 2015 в 22:33
Подскажите, пожалуйста, как сделать, чтобы окно закрывалось при клике вокруг окна, а не только по крестику? Спасибо.
Ответить
- driver: 9 июля, 2015 в 06:24
  Отвечал уже в комментах: Тынц
  Ответить
Владимир: 6 июля, 2015 в 22:37
Приветствую Вас! Хотел поставить модальное окно на сайте по Вашей инструкции. Всё заработало сразу!..но окно открывалось после загрузки любой страницы. Привязать к кукам так и не получилось. Окно открывается, но никак не хочет закрываться. В чем может быть проблема?
Ответить
4545: 23 августа, 2015 в 10:25
Почему-то решение с куками работает по-разному на разных сайтах. На одних закрытие действует для всех страниц, а на других только для той страницы где закрыли.
Ответить
- 4545: 24 августа, 2015 в 11:19
  Заметил, что такое поведение кукисов есть лишь у сайтов на хостинге VESTA, у них ещё панель своя какая-то.
  Ответить
Олег: 1 сентября, 2015 в 09:45
Всё сделал , всё работает . Интересует как реализовать такое . На сайте есть карточки товара , которые размещены во всплывающих окнах. Как сделать что бы по определенной внешней ссылке (например: mydomen/pop-up1.php открывалось нужное всплывающее окно с карточкой товара.Карточек порядка 20 штук. Подскажете ?
Ответить
Игорь: 3 сентября, 2015 в 20:15
Здравствуйте! Подскажите пожалуйста, как реализовать данный метод на движке opencart.
В принципе все установил и работает, но окно появляется каждый раз при обновлении страницы или открытии новой. Куки не работают, может кто поможет?
Ответить
Константин: 19 сентября, 2015 в 16:02
Здравствуйте!
Никак не могу заставить попап открываться с заданной периодичностью для одного пользователя (не чаще раза в N дней). Целый день гуглю, ваш пост — самое близкое по теме, но у меня попап на fancybox реализован немного по-другому. Пожалуйста, помогите адаптировать, а то я уже скоро с ума сойду!
Вот какой код у меня используется:
В :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { setTimeout(function(){ $("#various3").fancybox({ 'width' : 650, 'height' : 450, 'autoScale' : false, 'transitionIn' : 'fade', 'transitionOut' : 'fade', 'overlayOpacity' : 0.8, 'type' : 'iframe', 'padding' : 1 }).trigger('click'); }, 0); }); </script>
Перед :
<a id="various3" href="popup.html"></a>
popup.html — файл, который содержит код попапа. Проблема в том, что попап появляется при каждой перезагрузке страницы. Никак не могу адаптировать ваш метод использования cookie к этому примеру. Вы моя последняя надежда!
Ответить
- Константин: 19 сентября, 2015 в 19:31
  Вот так всегда бывает, только попросишь помощи, и сразу ответ находится 🙂 Нашел решение на одном форуме, ссылку не даю, чтобы не сочли за спам.
  Ответить
Андрей: 12 ноября, 2015 в 11:04
А как сделать так, чтобы окно открывалось, но его можно было бы прокручивать вместе со страницей?
Ответить
Анзаур: 13 ноября, 2015 в 18:12
Здравствуйте! А как Ваш пример реализовать так, чтобы всплывающее окно появлялось только на главной странице?
Ответить
- Сергей: 26 ноября, 2015 в 15:32
  Разместите код только для главной страницы и все
  Ответить
Денис: 30 ноября, 2015 в 12:05
Здравствуйте, перезалейте ссылку для скачивания файлов, она не рабочая
Ответить
- driver: 30 ноября, 2015 в 20:56
  Спасибо, Денис.
  Ссылку на архив с исходниками поправил )).
  Ответить
Omar: 6 декабря, 2015 в 19:14
Спасибо, статья супер, разобраться не сложно)
Ответить
- driver: 6 декабря, 2015 в 23:06
  Omar, спасибо за интерес к статье и ваш отзыв.
  Ответить
Антон: 16 декабря, 2015 в 01:13
Доброго времени суток, уважаемый автор! Большое спасибо за эту статью! Очень полезная статься. У меня правда возникла небольшая проблема. Я попробовал данную функцию добавить на сайт, который работает на третьей джумле, причем на шаблоне JA Mediacare, в котором есть слайдер и он перестал работать. Если убрать подключение jquery
то слайдер начинает работать, но не появляется модальное окно 🙂
подскажите, пожалуйста, куда копать?
Ответить
- driver: 16 декабря, 2015 в 21:17
  Скорее всего у вас конфликт между двумя версиями jQuery. Попробуйте вместо $(function() написать
  $(document).ready(function() или jQuery(function($). Если не поможет, то костыль в виде jQuery.noConflict (); И лучше всё же, библиотеку jQuery включать один раз.
  Ответить
  - Антон: 16 декабря, 2015 в 22:51
    помогло jQuery (function ($)) — спасибо большое! 🙂
    собственно заработала та библиотека, которая была уже подключена для какого-то расширения джумлы, дополнительно подключать не пришлось
    Ответить
  - Павел: 7 декабря, 2018 в 00:27
    Спасибо огромное! Промучился 2 дня. jQuery (function ($) помогло. Дополнительно библиотеку не подключал
    Ответить
Евгения: 21 декабря, 2015 в 03:11
Статья очень полезная, большое спасибо автору!)
в скриптах я не сильно разбираюсь, поэтому прошу помощи
у меня в таком модальном окне есть кнопка. Как сделать так, чтобы окно выскакивало до тех пор, пока человек не нажмет на эту кнопку?
Буду очень благодарна!
Ответить
- driver: 21 декабря, 2015 в 18:59
  Здравствуйте, Евгения.
  Попробуйте прикрутить запись cookie к вашей кнопке. Соответственно с кнопы закрытия запись cookie снимите, т.е уберите id=”setCookie” из тега ссылки. В одном из ответов на комментарии, всё подробно расписал: тынц
  Ответить
  - Евгения: 22 декабря, 2015 в 00:07
    Разобралась. Спасибо большое!
    И что отвечаете так оперативно тоже спасибо)
    Ответить
Talik: 24 декабря, 2015 в 00:11
Здравствуйте.
Спасибо за рабочий пример. Все супер. Но я решил переделать его на модальные окна бустрап и столкнулся с проблемой: не могу корректно добавить запись для куки.
сам запуск модального окна бустрап (через 3 секунды) не проблема:
$(document).ready(function() { setTimeout(function(){ $('#UvedomlenieModal').modal('show'); }, 3000); });
а вот как сюда добавить куки?
Спасибо.
Ответить
- driver: 24 декабря, 2015 в 01:15
  Не гарантирую на все сто, что сработает, но в принципе тоже самое:
  $(document).ready(function() { if (!$.cookie('hideModal')) { setTimeout(function(){ $('#UvedomlenieModal').modal('show'); }, 3000); } $.cookie('hideModal', true, { // Время хранения cookie в днях expires: 7, path: '/' }); });
  Время хранения cookie, соответственно выставите своё, 7 дней это для примера.
  Ответить
Дмитрий Першин: 24 декабря, 2015 в 07:59
Гораздо проще использовать не 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);
}
“.
Таким образом окно будет появляться один раз в пределах сессии.
Ответить
- Алекс: 2 марта, 2016 в 23:44
  Ох, если бы вы еще объяснили для самых-самых… Звучит все красиво, а что куда вставлять, не понятно. Лично у меня с куками не вышло и возможно ваш способ проканал бы.
  Ответить
  - Дмитрий Першин: 4 марта, 2016 в 04:28
    В коде окна, в теге <button> добавляете в обработчик события onklick следующий код: sessionStorage.setItem('off','true');.
    В итоге код окна будет такой:
    <div id="overlay"> <div class="popup"> <h2>Модальное Окно!</h2> <p> Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения. </p> <div class="pl-left"> <img src="https://lorempixel.com/320/320/people/some-text"> </div> <p>Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.</p> <div class="pl-right"> <img src="https://lorempixel.com/320/320/people/some-text"> </div> <p>Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.</p> <p> Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1 </p> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';sessionStorage.setItem('off','true');"></button> </div> </div>
    Ниже в сам скрипт добавляете условный оператор if:
    <script type="text/javascript"> if (!sessionStorage.getItem('off')){ var delay_popup = 5000; setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);} </script>
    Ответить
    - Алекс: 4 марта, 2016 в 14:55 Ответить
    - Влад: 6 июля, 2018 в 18:04 Ответить
Talik: 24 декабря, 2015 в 13:48
благодарю, Ваш способ помог (исправил только события для стандартных в бутстраппе)
вышло так
$(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 модального окна.
сам код модального окна для наглядности
<div class="modal fade" id="UvedomlenieModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Название окна</h4> </div> <div class="modal-body"> <p>текст в модальном окне</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div>
Ответить
Андрей: 3 февраля, 2016 в 12:08
Добрый день.
Спасибо большое за такой пример очень понятно и просто! Подскажите пожалуйста как с помощью Вашего примера можно закрывать это модальное окно не только кнопкой «закрыть», но и кликом на область вне модального окна, то есть по любому месту сайта, что-то всю голову поломал, так и не понял как это сделать 🙁
Спасибо большое!
Ответить
- driver: 3 февраля, 2016 в 19:58
  Спасибо за отзыв. По поводу вашего вопроса, отвечал уже в комментах: Тынц
  Ответить
Денис: 3 февраля, 2016 в 20:09
Доброго вечера!
Вопрос может и не совсем в тему, но тем не менее, долгое время пробую сам, но все бесполезно, хочу узнать, может вы мне подскажете, как сделать красивую смену фото в шапке сайта по примеру: school-plav14.ru , очень хочу такое же, но что то не получается…
Может у вас есть исходники?
Ответить
Станислав: 14 февраля, 2016 в 23:08
Спасибо за статью, полностью рабочая…подскажите только как установить закрытие модального окна по любой точке на экране вне самого popup,и с помощью клавиши esc.
Ответить
- driver: 15 февраля, 2016 в 01:10
  Для закрытия вне окна, достаточно для <div id="overlay"> продублировать событие onclick, должно получиться следующее:
  <div id="overlay" onclick="document.getElementById('overlay').style.display='none';">
  Для закрытия по клавише 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: Архив обновил, внесены некоторые изменения и исправлены мелкие ошибки.
  Ответить
  - Станислав: 15 февраля, 2016 в 12:17
    Спасибо, код работает! —
    Кусок кода для esc, не удалось запустить, сайт написан на joomla, на котором установлен компонент widgetkit, в котором есть собственная библиотека jQuery, при в вписывании вашего кода для esc, код не отрабатывает, но это не большая проблема, главное что по клику закрывает.
    Подскажите еще одну вещь, как сделать чтобы при закрытии модального окна был легкий эффект затемнения, как при открытии, так как сейчас окно мгновенно закрывается…пробовал сделать также через jQuery, класов fadeOut но он у меня тоже не отрабатывает.
    Ответить
Касъ: 17 февраля, 2016 в 02:59
Большое спасибо за статью — благодаря ей исправила свои ошибки!
Но, к сожалению, на сайте так и не нашла рабочего кода, который бы контролировал частоту появления модального окна раз в заданный период или раз в сессию(
Ответить
- driver: 17 февраля, 2016 в 17:26
  За отзыв спасибо.
  Контролировать частоту появления модального окна в заданный период, можете с помощью jQuery.cookie, в статье подробно всё расписано. В примере я выставил ограничение показа для одного пользователя 1 раз в 7 дней(неделя), вы же можете задать от 1 дня до года(365). Окно будет показано пользователю 1 раз в заданный период, или пока товарищ, не удалит cookie в своём браузере.
  Ответить
profi: 21 февраля, 2016 в 17:35
У меня тоже не получилось с куки (
Ответить
- driver: 21 февраля, 2016 в 19:38
  Перво наперво проверьте, задействована ли у вас на сайте библиотека jQury:
  <script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
  Подключён ли плагин jQuery.cookie.js:
  <script src="https://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
  Ну,и в исполняемом js, постарайтесь избежать ошибок, и уверен, всё у вас заработает.
  И ещё, если у вас какой-нибудь модуль/плагин подключает jQuery, может возникнуть конфликт между двумя версиями jQuery, исправить просто: Тынц
  Ответить
profi: 21 февраля, 2016 в 17:36
и не понял куда нужно вставить эту строку что бы окно закрывалось при нажатии в любом месте
Ответить
- driver: 21 февраля, 2016 в 19:01
  Что же здесь непонятного? У меня нет особого желания, через комментарий отвечать на один и тот же вопрос: смотрите, читайте…
  Ответить
Евгений: 24 марта, 2016 в 21:45
День добрый, Ваш вариант всплывающего окна то что я искал)
Вроде все получилось с куками, на denver работает.
Хотел бы спросить, как можно сделать автозакрытие и срок хранения не в днях а в часах, к примеру мне нужно показать окно 1 раз в 3 часа.
Спасибо за своевременный ответ!
Ответить
- driver: 25 марта, 2016 в 02:15
  $(document).ready(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не происходит if (!$.cookie('hideModal')) { // если cookie не установлено появится окно // с задержкой 5 секунд setTimeout(function(){ $('#overlay').css({'display' : 'block'}); }, 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 минут, т.е. полчаса
  Добавил комментарии в код, надеюсь разберётесь
  Ответить
  - Евгений: 25 марта, 2016 в 10:27
    Спасибо Вам огромное! Все работает!
    Ответить
  - Евгений: 25 марта, 2016 в 10:46
    А можно еще поинтересоваться? А я вот к примеру хочу туда всунуть резиновый баннер, как так сделать чтобы края самого окна были на 10-15px больше самого резинового баннера, но не более к примеру 350px по ширине или это уже из области фантастики? )
    Ответить
    - driver: 25 марта, 2016 в 19:12 Ответить
Натали: 18 апреля, 2016 в 04:39
Ой, спасибо, добрый человек!
Обшарила сеть в поиске простого модального окна на сайт, зарылась в дебри JS и jQuery — караул!
А все не то что надо попадалось. А у Вас в блоге сразу просто, быстро, все с первого раза работает.
Еще раз мерси.
Запостила на Google+ и в facebook.
Толковый сайт — добавила в закладки.
Желаю процветания и успеха!
Ответить
Дмитрий: 23 мая, 2016 в 23:00
Добрый вечер.
Спасибо большое. То, что нужно.
Успехов.
Ответить
Игорь: 30 мая, 2016 в 13:34
Спасибо за эту статью. Очень пригодилась
Ответить
Олег: 4 июня, 2016 в 11:00
Здравствуйте. Хотелось бы реализовать всплывающее окно при попытке ухода посетителя с сайта . То есть , когда курсор мыши покидает рабочую область сайта , то должно всплывать окно с предложением . Само окно уже есть , вопрос как его запустить при попытке выхода с сайта ? Спасибо .
Ответить
- driver: 4 июня, 2016 в 20:53
  Вопрос из серии “как быстро убить свой сайт”. Моё отношение к такого рода фичам однозначно — ЗЛО!
  Но раз уж, вам так оно надо, гугля выложит вам кучу готовых решений, достаточно правильно задать запрос: тынц
  Ответить
Диана: 10 июня, 2016 в 04:18
Искала много раз подходящее модальное окно, уже оставляла попытки найти, а тут вот оно :))
Благодарю за простую версию.
Есть пару вопросов:
1. Как решить всплывающее окно в мобильной версии сайта?
2. Цвет кнопки закрытия у меня у меня почему-то белое.
Не пойму что мешает отобразить заданный цвет (я сменила Ваш зеленый на Оранж, а при клике вместо красного на голубой, под цвета моего сайта)
Ответить
- driver: 10 июня, 2016 в 18:52
  Диана, спасибо за отзыв.
  Кнопке закрытия присвоен класс .close, у вас в bootstrap.css присутствует класс с таким же именем, отсюда и конфликт. Просто обзовите класс .close кнопы как-нибудь по другому, например .close-modal, соответственно проделайте это как в html, так и в css. Селекторы в css у вас будут такие .close-modal, .close-modal:before и .close-modal:hover. Всё, теперь разукрашивайте кнопу, как хотите.
  При просмотре в эмуляторе мобильных устройств, окошко отображается корректно, просто в вашем случае оно всплывает немного не там )), для .popup замените абсолютное позиционирование position: absolute; на фиксированное position: absolute; и проверьте, что получится.
  Ответить
Андрей: 12 июня, 2016 в 13:31
не могу сделать по кукам, дайте ваш скайп либо еще где нибудь связаться с вами
Ответить
евгений: 22 июня, 2016 в 17:10
Спасибо большое превосходное рабочее решение ! А главное работающее восхитительно !
Ответить
Артем: 2 июля, 2016 в 12:01
Привет, код прекрасный, все зашибись. Но, как можно сделать чтобы окно всплывало только тем кто новый посетитель ,как на сайте есть окно prntscr.com/bnt3ky. Посмотрите пожалуйста: vsedlyavanny.kz/shop/Dushevie_kabini/
Ответить
- driver: 2 июля, 2016 в 22:39
  Здравствуйте, Артём.
  В принципе достаточно прикрутить к окошку jquery.cookie.js, и установить время хранения cookie в днях expires: 365, что равно 1 году. Соответственно при заходе нового посетителя на сайт окно будет показано пользователю 1 раз в заданный период (1 год), или пока товарищ, не почистит cookie в своём браузере.
  Ответить
Петр: 5 июля, 2016 в 23:51
Спасибо, то что надо! Долго искал такое решение. Легкий и понятный скрипт.
Привинтил только кусочек с cookies к тому, что ранее было слеплено.
$(function () {
if (!$.cookie (‘hideModal’)) {
setTimeout (function () {
$(«#popup»).fadeIn (4000)}, 3500);
$(«#popup-close»).click (function (e) {$(«#popup»).fadeOut (1500);
$.cookie (‘hideModal’, true, {
// Время хранения cookie в днях
expires: 1,
path: ‘/’
});
});
}
});
Ответить
- driver: 6 июля, 2016 в 00:07
  Спасибо за отзыв. Рад, что вам пригодилось.
  Ответить
- Артем: 6 июля, 2016 в 09:29
   <div id="overlay"> <div class="popup"> <h2>АКЦИЯ</h2> <p> Поделись нашей страничкой,на своей страничке в социальной сети, сфотографируй на свой мобильный,покажи нам и получишь скидку 10% на АБСОЛЮТНО ЛЮБОЙ УНИТАЗ в нашем магазине! </p> <div id="photo"> <img class="input-text" style="width: 100%; height: 100%;" src="/images/socbuton.png" width="1297" height="504"> </div> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button> </div> </div>  <? $(function () { if (!$.cookie ('hideModal')) { setTimeout (function () { $(«#popup»).fadeIn (4000)}, 3500); $(«#popup-close»).click (function (e) {$(«#popup»).fadeOut (1500); $.cookie ('hideModal', true, { // Время хранения cookie в днях expires: 1, path: '/' }); }); } }); ?>
  Помогите пожалуйста, вроде все слепил прилепил но не работает): видимо я совсем чайник…
  Ответить
  - driver: 6 июля, 2016 в 11:04
    Здравствуйте, Артём.
    Зачем себе всё усложнять? Почему не сделать всё как в статье, раз уж вы используете данную разметку для мод. окна
    Достаточно в 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
    Ответить
Никита: 28 июля, 2016 в 09:11
У меня идет конфликт jquerry библиотек, что делать?
Ответить
- driver: 28 июля, 2016 в 23:01
  Видимо fancybox, подтягивает, или вы сами подключаете повторно фреймворк jQuery и происходит конфликт между двумя версиями.
  Могу предложить несколько вариантов решения:
  1. Оставьте одну версию библиотеки jQuery, лучше которая подтягивается с гугла <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> например.
  2. Попробуйте в начале js окна вместо $(function() прописать $(document).ready(function () или jQuery(function($)
  3. Есть ещё костыль в виде jQuery.noConflict, но как правило он редко помогает…
  Ответить
Юрич: 29 августа, 2016 в 16:05
То что нужно. Спасибо за статью — беру на вооружение. Как раз сейчас делаю такую фишку чтобы была всплывашка с видео при открытии сайта и кукисы жили 1 день. Еще раз спасибо!
Ответить
петр: 4 сентября, 2016 в 21:06
может подскажет сделал такое окно движок джумла шаблон Rt Ximenia Responsive записал все это в модуле, вобщем не работаю куки без куков просто вызов скрипта все работает а куки не сохраняются, как их правильно подключить в джумле
Ответить
StiXy: 11 октября, 2016 в 16:58
Спасибо то что нужно. Но у меня небольшой касяк. Если вставлять кликабельную картинку в окне, то при попытке закрытия окна происходит переход по этой ссылке.
Пример:
<div id="overlay"> <div class="popup"> <h2>Модальное Окно!</h2> <p style="text-align:center"><a href="/"><img src="view.png" /> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button> </div> </div>
Ответить
- Vitaliy: 16 октября, 2016 в 13:55
  <p style="text-align:center"><a href="/"><img src="view.png" /> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
  
  А где закрывающие теги (</a>, </p>)?
  Ответить
  - StiXy: 14 ноября, 2016 в 15:59
    Да, совершенно верно, мой касяк. Теперь все супер!
    Еще вопрос, как сделать переход по своей ссылке при закрытии окна/нажатия крестика?
    Ответить
Сергей: 21 ноября, 2016 в 22:19
Здраствуйте Уважаемый!
Ставлю Вашу конструкцию на DLE-не работает.Можете объяснить почему?
Вот скрин
Ответить
- driver: 21 ноября, 2016 в 22:35
  Здравствуйте.
  Судя по скрину у вас напрочь отсутствуют подключаемые стили css, которые в демо прописаны в разделе <head> в секции <style type="text/css"></style>, других причин не вижу
  Ответить
  - Сергей: 21 ноября, 2016 в 23:05
    Спасибо заработало!
    Добавил Ваш код к этому
    ниже и заработало.
    Буду дальше мудрить-хочу вставить в Ваше окно подписку от FeedBurner.
    Ответить
    - driver: 21 ноября, 2016 в 23:19 Ответить
Виталий Янчук: 22 ноября, 2016 в 18:42
скажите, пожалуйста, можно ли сделать на такое всплывающее окно анимированную загрузку страницы? я вот читаю принцип проделки таких страниц в блоге http://shneider-host.ru/blog/animaciya-zagruzki-stranicy-v-drupal-7.html, но не могу понять применимо ли это ко всплывающим. помогите!
Ответить
Алексей: 13 декабря, 2016 в 06:34
driver, привет, спасибо за статью!
А как сделать так, чтобы куки выставлялись только тогда, когда показалось всплывающее окно?
Я хочу, чтобы оно показывалось через 20 секунд чтения статьи. Если посетитель сайта на первой странице провел 15 секунд, то при переходе на следующую страницу окошко уже не покажется 🙁
Ответить
Andrew: 28 декабря, 2016 в 01:06
Спасибо, отличная статья, то что я искал!
Ответить
Кира: 28 декабря, 2016 в 11:13
Спасибо! Самое классное окошко, что я видела. Все отлично работает.
Ответить
Алексей: 31 мая, 2017 в 10:11
Спасибо большое за всплывающее окно, прикрутил, использую… безумно благодарен!
Может кто подскажет как сделать, чтобы окно появлялось не 1 раз в день или неделю, а раз в час допустим.
Заранее спасибо!
Ответить
- driver: 31 мая, 2017 в 13:53
  Здравствуйте, Алексей.
  Если вы используете вариант с jQuery, попробуйте так:
  $(document).ready(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не происходит if (!$.cookie('hideModal')) { // если cookie не установлено появится окно // с задержкой 5 секунд setTimeout(function(){ $('#overlay').css({'display' : 'block'}); }, 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: На локалке скорее всего не сработает, проверяйте в онлайн
  Ответить
  - Алексей: 31 мая, 2017 в 14:36
    И снова огромное спасибо! Всё работает прекрасно!
    P.S. один маленький вопрос. когда на сайте перемещаюсь по другим страницам, куки автоматически обновляются и срок появления всплывающего окна отодвигается.
    Зашел к примеру на сайт:
    Создано: среда, 31 мая 2017 г., 13:35:00
    Срок действия: среда, 31 мая 2017 г., 14:05:00
    Через 2 минуты обновил старницу:
    Создано: среда, 31 мая 2017 г., 13:37:00
    Срок действия: среда, 31 мая 2017 г., 14:07:00
    надеюсь изложил суть своей проблемы понятно 🙂
    Ответить
    - Евгений: 10 ноября, 2017 в 03:35 Ответить
    - Евгений: 10 ноября, 2017 в 03:50 Ответить
Владимир: 12 июля, 2017 в 17:42
Спасибо, помогли !!!
Ответить
Сергей: 24 августа, 2017 в 22:27
Хорошая статья, а как сделать что бы окно появлялось только с 22:00 до 8:00 с задержкой секунд 20 после загрузки всей страницы?
Ответить
Александр: 7 сентября, 2017 в 19:59
В Google Chrome необходимо вставить в div свойство style=”display: none” Иначе содержимое div выводится.
Ответить
- driver: 7 сентября, 2017 в 21:08
  Вот прямо сейчас, тупо раз десять прогнал демку в Chrome, всё работает как надо, у базового контейнера с id="overlay", в котором располагается модальное окошко с содержанием, свойство display: none; прописано по-умолчанию, активируется с помощью js по истечении заданного времени (в демо это 5 секунд). Так что, скорее всего, что-то вы делаете не так
  Ответить
Виталий: 26 сентября, 2017 в 07:39
Доброго времени суток. Подскажите пожалуйста хотел сделать рекламу на сайте в сплывающем окне. К примеру чтоб всплывало окно не однократно: через 15 секунд, 1 минуту и т.д. Все сделал по инструкции только само модульное окно чтоб показывала разную рекламу, установил в движке в «Рекламных материалах» но к моему удивлению в заданные участки времени показывают одну и туже рекламу, хотя установлена разная
Ответить
Екатерина: 23 октября, 2017 в 15:11
Здравствуйте, подскажите, пожалуйста, как сделать, чтобы окно всплывало только на главной странице (сайт на joomla, вставила в index.php и при переходе на любую страницу сайта всплывает окошко)?
Ответить
- driver: 23 октября, 2017 в 19:57
  Здравствуйте, Екатерина.
  Не помню уже где, когда и зачем, но искал решение похожей проблемы, нарыл тогда парочку вариантов:
  Вариант 1
  <?php if (JURI::current() == JURI::base()): ?> // здесь выводим все, что хотим показать на главной <?php else: ?>
  Вариант 2
  <?php if (JURI::current() == JURI::base()): ?> // здесь выводим все, что хотим показать на главной <?php endif; ?>
  За работоспособность данных конструкций не ручаюсь, так что…
  Ответить
JD1: 28 октября, 2017 в 21:55
Доброго времени! кто поможет поставить?
Ну или объяснит как его поставить?!
Ответить
- driver: 29 октября, 2017 в 00:43
  Здравствуйте, JD1.
  Верите или нет, даже вот и не знаю, что тут можно ещё объяснять. В самой статье да и в комметах, давно уже всё разложено по полкам.
  Ответить
  - JD1: 29 октября, 2017 в 21:14
    Я извиняюсь за столь тупой вопрос конечно!) но у меня движок STRESSWEB и я просто не понимаю как его туда поставить! он просто не работает)
    Благодарю за понимание!
    Ответить
Николай: 10 ноября, 2017 в 20:54
Мне бы подошло такое всплывающее окно, только с более сложным условием: всплывающее окно должно появляться по нажатию на кнопку, если в статье отсутствует произвольное поле со ссылкой (сайт на Вордпрессе) — «К данной статьи нет дополнительных материалов». У меня почти к каждой статье есть материалы, поэтому в коде к статье вставил php-функцию, которая выводит содержание произвольного поля (ссылку на дополнительные материалы).
Заранее благодарю автора или тех, кто поможет прописать такой код)
Ответить
GMP: 13 ноября, 2017 в 12:11
у меня конструкция if (!$.cookie('hideModal')){...} срабатывала без задержек, и при заходе на любую страницу создавалась кука, при переходе в браузере на другие страницы модальное уже не появлялось, пришлось дописывать
var delay_cookie = delay_popup + 1000; setTimeout("$.cookie('hideModal', true, { expires: 365, path: '/' });", delay_cookie);
Ответить
Дмитрий: 24 ноября, 2017 в 17:39
Суперское решение. Вопрос глупый, но как сделать чтобы окно скрывалось при клике по фону?
Ответить
- Дмитрий: 24 ноября, 2017 в 17:50
  Вернее, onclick=”document.getElementById (‘overlay’).style.display=’none’;” не подходит, т.к. закрытие проиисходит и по клику на всплывающее окно, а у меня там форма отправки, поэтому мне нужно чтобы окно закрывалось только по клику фона.
  Ответить
- Дмитрий: 25 ноября, 2017 в 12:05
  Ответ на мой вопрос, если кому интересно:
  $(«.popup»).click (function (e) {
  e.stopImmediatePropagation ();
  });
  Ответить
  - Сергей: 11 октября, 2018 в 15:31
    Подскажите пожалуйста где этот код прописать?
    Ответ на мой вопрос, если кому интересно:
    $(«.popup»).click (function (e) {
    e.stopImmediatePropagation ();
    });
    PS я плохо разбираюсь
    Ответить
Виктор: 28 февраля, 2018 в 19:32
Добрый день!
А есть возможность сделать так, чтоб на мобильной версии сайта окно не появлялось?
Ответить
Yusuf: 31 мая, 2018 в 15:53
У меня само всплывающее окно не появляется, но при этом куки работают
Помогите пожалуйста
Ответить
- driver: 31 мая, 2018 в 17:51
  Здравствуйте, Yusuf.
  Дело в том, что не видя пациента, трудно его лечить)).
  Чтобы вам помочь, мне нужно видеть ваши исходники
  Ответить
Александр: 28 августа, 2018 в 22:40
Андрей, спасибо за материал!
Все у меня получилось. Кроме одного… Окно появляется через 5 секунд не плавно, а мгновенно.
100 раз пересмотрел текст. Вынес стили в отдельный файл. Не могу понять, где ошибка.
Поможете?
Ответить
- driver: 29 августа, 2018 в 00:47
  Здравствуйте, Александр.
  Это мой косяк, в статье, при последнем обновлении, в примере кода пропустил @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 }
  }
  
  Ну, а я внесу изменения в статью.
  Надеюсь всё у вас получится )).
  Ответить
  - Александр: 29 августа, 2018 в 09:18
    Спасибо за ответ!
    Вставил этот текст в css и все заработало.
    Собственно, вчера еще смотрел код вашей страницы, видел эти «кракозябры». Но так как я еще достаточно далек от css, то не понял что это такое и не придал этому значение. Еще раз спасибо! Буду разбираться теперь как это все работает!
    Ответить
Жанат: 23 ноября, 2018 в 13:06
Дай Бог тебе здоровья, добрый человек!
Ответить
Сергей: 11 декабря, 2018 в 14:38
Спасибо большое! Классная вещь)
Ответить
Вадим: 4 февраля, 2019 в 20:45
да одно из лучших исполнений автоматического модального окна, уже поставил на три сайта, огромная благодарность за код
Ответить
DeN: 18 февраля, 2019 в 11:38
При первом запуске из демо и исходниках сразу пишет в куку, что окно закрывалось.
Ответить
- Владимир: 25 февраля, 2019 в 19:24
  Добрый вечер!
  Не удается заставить cookie работать.
  что у Вас значит hideModal ? Где мы его определяем?
  Ответить
  - driver: 25 февраля, 2019 в 22:07
    hideModal у меня это ничто иное как логичное (на мой взгляд) имя cookie, определяем его в if (!$.cookie('hideModal')) и $.cookie('hideModal', true,. При посещении сайта проверяется запись в куках о посещении, если запись с именем hideModal отсутствует, загрузится модальное окно, если запись есть — ничего не произойдёт
    Ответить
Сергей Нестеровский: 9 марта, 2019 в 22:11
Виджет из VK не выводится почему то в этом модальном окне.
Ответить
- driver: 10 марта, 2019 в 23:55
  Проверил, виджеты комментариев и рекомендаций, например, выводятся без проблем, с авторизацией через vk, да, какие-то непонятки есть, другие не смотрел
  Ответить
Галина: 20 мая, 2019 в 07:33
Добрый день! Спасибо за полезную статью, все работает. Но у меня возникла проблема. После открытия модального окна (есть запускаемые через определенное время, есть запускаемые по нажатию на текст) они остаются в «памяти». То есть: открыла я окно, закрыла окно и если я буду нажимать на кнопку «назад» на странице, то все мою 100500 открытий и закрытий этого окна появляются по шагам. Расскажите, пожалуйста, как избавиться от этой напасти???
Ответить
- driver: 20 мая, 2019 в 16:24
  День добрый!
  Обратите внимание на другое решение, в котором используются скрытые чекбоксы и нет надобности в ссылках и свойстве :target соответственно Тынц »
  С оформлением окошек и анимацией разберётесь без труда.
  Ответить
  - Галина: 24 мая, 2019 в 05:01
    Спасибо! Это именно то, чего я и хотела!) Все работает как нужно.
    Ответить
Лида: 24 мая, 2019 в 23:04
Я безмерно счастлива, и безмерно благодарна этой статье, я уже всю голову сломала как же сделать чтобы модальное окно не вылезло при обновлении страницы и вот оно!Огромнейшее спасибо! Не передать словами как я счастлива)
Ответить
Аполло: 12 июля, 2019 в 13:59
Забыли самое главное, по каким каталогам это все «распихивать».
Ответить