Всплывающее окно при входе на сайт | HTML & JavaScript & CSS

Я полностью согласна, что модальные окна с затемнением надоели и сильно нервируют. Даже есть такое требование к веб-ресурсам в AdSense "Сайты... не должны... содержать всплывающие окна, затрудняющие навигацию". Но что такое "всплывающие окна, затрудняющие навигацию" мне так и не растолковали (ссылка на ветку официального форума). Если вы обладаете поддержкой сотрудников AdSense по электронной почте, то задайте, пожалуйста, им сей вопрос.

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

В целом я бы выделила следующие пункты, которых следует придерживаться:

  • объявление показывается одному человеку только один раз при первом заходе на веб-проект вне зависимости от страницы, на которую он попал (JavaScript),
  • минимум анимации, послание появляется спустя какое-то время нахождения человека на странице (CSS),
  • простое закрытие: активное "затемнённое" поле, заметный крестик, действие кнопки Esc.

Рассмотрим создание именно такого простого, но симпатичного и "резинового", всплывающего окна на HTML5.

<style>
#popup {
  display: table;
  position: fixed; top: 0; left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background: rgba(240,240,240,.9);
  visibility: hidden;
  animation: animaciya 1s 5s forwards; /* 5s - это количество секунд по истечении которых появляется сообщение */ 
  cursor: pointer;
}
@keyframes animaciya {   
  from {visibility: hidden;}  
  to {visibility: visible;} 
}
#popup figure {
  display: table-cell;
  vertical-align: middle;
}
#popup div, #popup figcaption, #popup figure:before {
  max-width: 500px; /* максимальная ширина */ 
  margin: 0 auto;
  border-style: solid; 
  border-color: rgb(88,125,164);
  background: #fff;
}
#popup figure:before { /* стиль кнопки "закрыть" */ 
  content: "закрыть";
  display: block;
  padding: 0 1%;
  border-width: 4px 4px 0 4px;
  border-radius: 5px 5px 0 0;
  text-align: right;
  color: rgb(88,125,164);
}
#popup div, #popup figcaption {
  padding: 1%;
  cursor: default;
}
#popup figcaption {
  position: relative;
  border-width: 0 4px 0 4px;
  font-size: 150%;
  text-transform: uppercase;
  color: rgb(100,100,100);
}
#popup figcaption:before { /* стиль восклицательного знака, не поддерживается Google Chrome. Его можно заменить на что-то более приемлемое */ 
  content: "\26a0 \20 \20";
  color: red;
  font-size: 150%;
  vertical-align: middle;
}
#popup div {
  border-width: 0 4px 4px 4px;
  border-radius: 0 0 5px 5px;
}
</style>

<div id="popup">
  <figure>
    <figcaption>заголовок</figcaption>
    <div>содержание</div>
  </figure>
</div>

<script>
window.onkeyup = okno; // нажатие Esc, см. условие "e.keyCode==27" 
document.getElementById('popup').onclick = okno;

function okno(e) {
  if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) { // через && перечисляются теги, клинкув на которые окно не будет закрыто; сюда же можно включить тег A или IFRAME 
    document.getElementById('popup').style.display='none';
    localStorage.setItem('popup1', 'none');
  }
}

if(localStorage.getItem('popup1')) {
  document.getElementById('popup').style.display='none';
}
</script>
в f t
наверх ↑

67 комментариев:

Анонимный
Спасибо, очень помогло!
Chervique
Большое спасибо за полезный код. Украл его у вас для своего сайта )

Касательно вашего вопроса о "всплывающих окнах, затрудняющих навигацию".
Гугл здесь руководствуется тем же правилом, что и для всего остального: "содержимое для робота должно быть идентичным содержимому для людей". Также, алгоритм, по которому он (гугл) реагирует на всплокна, похож на алгоритм блокировки всплокон браузерами (при включении соответствующей блокировки).
Определения "вредности" самого же контента этих окон у поисковой системы нет. Если код чистый, писать можете что угодно (почти).
В качестве примера: у меня на сайте http://hitechdevice.net/ на странице любого товара реализованы всплывающие окна на Jquery (картинки), Ajax (добавление в корзину) и javascript (ваше всплокно). Разная реализация и контент, но пока они "белые", гуглу на них плевать.

Но тут есть и нюансы. Не нужно думать, что гугл дурак и размещать на страницу с баннерами "чистое" всплокно с призывом "нажмите на рекламу, для мира во всём мире". Хоть такое окно и не повлияет на позиции сайта, но в Adsense это вычисляет на раз и просто заблокирует ваши рекламные выплаты.
NMitra
С помощью алгоритмов мой вариант не вычисляется, по крайне мере в Гугле сейчас не заложены такие данные.

Например, на Авито я видела плавающий блок с рекламой AdSense. Можно легко настучать, но автоматом это не вычисляется.

Мой вопрос относится именно к AdSense (не к поиску), именно к чей-то жалобе.
Chervique
Может автоматом и не вычисляется, но, как я писал выше, Adsense всё-равно заморозит выплаты с аккаунта, на котором будут применяться такие способы увеличения кликов по рекламе. Настучит кто-то или они сами находят нарушителей - это уже второй вопрос. Поверьте, проверять не стОит.
Вообще, любое стимулирование посетителей к нажатию на рекламу, будь то всплывающие окна или что угодно другое - это грех.
NMitra
Про "стимулирование посетителей" согласна, но вот "сайты не должны содержать всплывающие окна, затрудняющие навигацию" мне не совсем понятно. Должно быть точное определение понятия, а не расплывчатое. Вот здесь мои предположения https://productforums.google.com/forum/?hl=ru#!msg/adsense-ru/yyAeqm2_QOY/pRB0GzBGGikJ Есть ли что дополнить? "Белые" - это также всего лишь выдумки сеошников, должно быть более чёткое указание.
Chervique
Я прочитал ваши вопросы по этой ссылке еще до того, как написал первый пост, и, старался в сжатой форме ответить сразу на все.
Коротко по пунктам:
1. "Это любые окна, которые появляются и при щелчке по кнопке"... или автоматически.
2. Нет. Да. Нет.
3. Нет.
4. Оба примера приемлемы.

Кстати вот тут точное определение "затрудняющие навигацию" https://support.google.com/adsense/answer/1346295?hl=ru&ref_topic=1271508&rd=1#Placing_Google_ads_on_a_website_with_pop-ups

И слово "белые" или "чистые" я употреблял только в контексте отношения гугла к коду. СЕО тут не при чем.

Если у вас всё еще будут вопросы - задавайте. А то я могу просто пропустить что-то из-за кажущейся очевидности темы.
NMitra
Интересная ссылка, я как-то мимо неё прошагала. Вот эта строчка особенно заинтересовала "где имеется более трех всплывающих окон"

Если как вы говорите, что всплывающие окна - это окна, появляющиеся и при щелчке по кнопке. То как быть с Lightbox? То есть, когда нажимаешь на картинку, а она во весь экран разрастается? Код строится по тем же принципам.
Chervique
Сколько бы картинок у вас не было на странице, Lightbox будет считаться за одно всплывающее окно, т.к. выполняется один и тот же скрипт.
А вот если страница открывает новые окна или вкладки браузера, то это уже другое дело. Тут надо быть аккуратным. Не зря большинство таких окон и блокируются браузерами. Именно потому, что всякие onmousover="window.open" и т.п. зачастую используется для накрутки.

Ну и самое главное: какие бы у вас не присутствовали всплывающие окна, держите их подальше от adsense блоков. Если вы не будете пытаться накручивать показы/клики, то сможете спокойно использовать сколько угодно и каких угодно окон.
Анонимный
Я че то не пойму и куда этот скрпит вставлять к ксс или на страницу сайта?
NMitra
Всё, что между тегами <style></style> - в стили CSS, только их (открывающиеся и закрывающиеся теги style) не нужно.
Тег <script></script> с содержимым лучше запихнуть в конец страницы, так страница будет быстрее грузиться.

В принципе, можете и так как есть, весь код из статьи внести на HTML страницу - работать будет, но это не совсем корректно.
Анонимный
Так а где написано заголовок и содержание этот код куда вставлять?
Анонимный
Я правильно все поставил как ты говорила но почему то не работает!

script В страницу сайта самый низ
style В CSS тоже все в самый низ поставил и убрал теги style с начала и в конце

а куда вставлять код заголовок и содержание не могу понять я поставил в страницу сайта но не фига не получается не знаю почему может объяснишь по подробней за ранее спасибо
Анонимный
Все что начинается с "div id="popup"" и заканчивается "/script" кидай в index.php, т.е. на главную страницу, то что в тегах style/style кидай в стили css.
Анонимный
я все так и сделал не фига не работает!!!
Анонимный
"Цитирую"
Все что начинается с "div id="popup"" и заканчивается "/script" кидай в index.php, т.е. на главную страницу, то что в тегах style/style кидай в стили css.

Что значит index.php ты имел виду текставой файл и через него сделать html ссылку или что поясни?
NMitra
Кидайте URL своего сайта, посмотрю что есть в исходном коде.
Анонимный
NMitra как с вами можно связаться?
NMitra
n.mitra@yandex.ru
Анонимный
Щас я вам напишу
Анонимный
Добрый день! Все поставил все работает,спасибо ,но вот вопрос как сделать ,чтобы окно постоянно открывалось при переходе на главную страницу ???
NMitra
Только на Главной ставьте код. Уберите из скрипта

localStorage.setItem('popup1', 'none');

if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}
Анонимный
Миша

Большое спасибо за пример, вполне применимое решение.
Главный вопрос, как всплывающие окно применить только для одного браузера, интересует internet exploer

ПС.. есть страницы где IE не понимает того или иного скрипта, собственно потому, ищу решение
NMitra
Попробуйте применить префикс для анимации. http://shpargalkablog.ru/2012/03/animaciya-css.html Для IE -ms-. Профиксы поживут ещё какое-то время. Но на более пару лет рассчитывать не приходится, Мозила от них официально уже отказался.
NMitra
Ах, да. Для IE есть ещё комментарии вида <!--[if IE]> <![endif]-->
Анонимный
Спасибо, применил скрипт. Но следует добавить, что нужно добавить префикс -webkit- к свойствам animation и @keyframes animaciya. Иначе может не работать в вебкит-браузерах, в частности Chrome. Проверено.
Причем на Вашей страничке скрипт отрабатывает, а на моей без префиксов не работал.
NMitra
Здравствуйте, да, всё верно, сейчас нужно. Но префиксам недолго осталось, я писала статью из расчёта на будущее. ))
Анонимный
А как сделать чтобы окно появлялось один раз в каждый новый день?
Анонимный
Не работает в Опере и Хроме. Как сделать?
NMitra
Пока не думала, как localStorage раз в сутки показывать. Если срочно, то
https://www.google.ru/search?ie=UTF-8&hl=ru&q=localStorage%20%D0%BE%D0%B4%D0%B8%D0%BD%20%D0%B4%D0%B5%D0%BD%D1%8C#hl=ru&newwindow=1&q=localStorage+24+hours
А так, подумаю на досуге.

Что именно не работает в Хроме? Сейчас что Хром, что Опера, без разницы, они на одном движке сидят.
Анонимный
Тестировал скрипт в Опере и не всплывает Popur окошко
NMitra
Добавьте префиксы -webkit- и -o- См. http://shpargalkablog.ru/2012/03/animaciya-css.html
Некоторые используют скрипты, которые автоматом ставят префиксы. К тому же их (префиксы) скоро отменят. Поэтому я ими пренебрегаю. Но вам не стоит делать как я, особенно если рассчитываете на поддержку старых браузеров.
Анна Мухина
Не работает. Есть ли у вас демо-страница с данным примером, чтобы сравнить вашу и мою версию кода?
NMitra
Покажите свою страницу с кодом.
Илья
Подскажите, как сделать, чтобы закрывалось по нажатию на фон и "закрыть"? Сейчас закрывается только по esc. Заранее спасибо
Илья
Всё нормально заработало, после того, как разместил скрипт самым последним)
NMitra
Верно, или после html или в head, но это со всеми скриптами так, искл. функции который активизирует window.
Анонимный
Здравствуйте! Я поставил все как написано, стили в стили, скрипт в скрипт, штмл в главную страницу, но попап не работает почему то. Можете посмотреть? сайт belvideo.ru
NMitra
Здравствуйте, скрипт должен идти после div, можете добавить его перед закрывающимся body
Анонимный
Добрый день! взял этот попап для виджета вконтакте. Встроил его между . Все нормально работает, но когда подключаю в конце body ваше окно, то получается что в блоке с виджетом основным появляется еще один, а окно соответственно пустое с текстом и кнопкой закрыть. Как исправить. Может нельзя 2 виджета добавлять на сайт?

если надо могу тестовый исходник скинуть куда-нибудь...
Анонимный
вопрос решен по виджету вконтакте!!! Заменить в ID дива и в скрипте на заначение vk_groups1

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

кстати я опять напутал))) у меня браузер portable и очищает куки каждый раз как закрывается....
NMitra
Поддержка браузерами http://caniuse.com/#feat=namevalue-storage
Я в статье использовала sessionStorage, так как это пример и удобней чтобы он был продемонстрирован каждый раз при заходе на страницу.
Анонимный
Интересный скрипт. Помогите модифицировать, как сделать чтобы он показывался 1 раз в сутки, и как сделать чтобы он срабатывал постоянно (для тестирования)
NMitra
"как сделать чтобы он срабатывал постоянно" - убрать

if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}

"он показывался 1 раз в сутки" - вместе с display запоминать дату
Дмитрий
Спасибо получилось! Еще вопросик как его позиционировать на страничке, например в правом верхнем углу?
Если меняю тут ничего не выходит если еще где-то то перекашивает, видать знаний моих в css маловато
#popup {
display: table;
position: fixed; top: 0; left: 0;
NMitra
Не успеваю оперативно отвечать на вопросы. См.
http://shpargalkablog.ru/2012/04/vertical-align.html#table-cell
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto :

#popup figure {
vertical-align: top;
}
#popup div, #popup figcaption, #popup figure::before {
margin: 0 0 0 auto;
}
Анонимный
Здравствуйте, Наталья!
Подскажите, пожалуйста, как в следующих ваших разработках изменить условие "открывается 1 РАЗ" :
а) Отменить совсем.
б) Установить число открываний при загрузке.
NMitra
Здравствуйте, замените

function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) {
document.getElementById('popup').style.display='none';
localStorage.setItem('popup1', 'none');
}
}
if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}

на

function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) {
document.getElementById('popup').style.display='none';
if(localStorage.getItem('popup1')) {
localStorage.setItem('popup1', parseFloat(localStorage.getItem('popup1')) + 1);
} else {
localStorage.setItem('popup1', '1');
}
}
}
if(parseFloat(localStorage.getItem('popup1')) > 3) { // вместо 3 своё значение
document.getElementById('popup').style.display='none';
}
V.Pshenichnikov
Спасибо! Точно, оперативно.

Unknown
спасибо за код
только вопрос
как в кнопку "закрыть" вставить ссылку
NMitra
Не скажу :) Не есть хорошо это.
JACEK
А как вставить фото?
NMitra
Куда вставить?

<div><img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!"/></div>
Анонимный
Здравствуйте!

У меня на сайте модальное окно воспроизводится всего один раз за всё время… Мне нужно, что бы оно воспроизводилось пользователю при каждом новом заходе на сайт.

К примеру: Пользователь посетил мой сайт и ему всплыло это модальное окно (это для социального виджета «лайкнуть страницу в Фейсбуке»), после чего окно не появляется пока пользователь на сайте. Но при повторном возращении на сайт, чтобы всё повторялось опять, пользователь перешёл на сайт – окно появилось… Собственно в точности как у вас сейчас на сайте, я так понимаю, так как у вас окно появляется как только я повторно возвращаюсь к вам на сайт.
NMitra
Здравствуйте, замените на sessionStorage http://shpargalkablog.ru/2013/06/localStorage.html


function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) {
document.getElementById('popup').style.display='none';
sessionStorage.setItem('popup1', 'none');
}
}

if(sessionStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}
Арт
Здравствуйте, подскажите пожалуйста, а как можно сделать после открытия окна когда человек защёл на сайт, что бы можно было его закрыть, и окно превращалось в ссылку кнопку, при нажатию на которую потом снова бы открывалось окно?) спасибо!
NMitra
Здравствуйте, так попробуйте ( https://jsfiddle.net/NMitra/panh036s/1/ ):

window.onkeyup = okno;
document.getElementById('popup').onclick = okno;
function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) {
document.getElementById('popup').setAttribute('style', 'visibility: hidden !important;');
localStorage.setItem('popup1', 'none');
if (document.getElementById('popupOn').innerHTML == '') {
oknoOn();
}
}
}
function oknoOn() {
var theButton = document.createElement('button');
theButton.innerHTML = 'Ау, я тут';
theButton.setAttribute('onclick', 'document.getElementById("popup").setAttribute("style", "visibility: visible; animation: none;")');
document.getElementById('popupOn').appendChild(theButton);
}
if(localStorage.getItem('popup1')) {
document.getElementById('popup').setAttribute('style', 'visibility: hidden !important;');
oknoOn();
}
Галина
В IE окно появляется постоянно
NMitra
Вы имеете ввиду IE меньше 8 версии?
http://caniuse.com/#feat=namevalue-storage
Галина
Нет в 11
Галина
И как, например, сделать в popup-окне checkbox, чтобы если его поставить,то это окно не выдавалось больше никогда.
NMitra
В примере на этой странице? Для удобства здесь я сделала sessionStorage (то есть один раз в рамках одной вкладки: можно походить по страницам сайта, вернуться обратно и сообщение не появится).
NMitra
Подробнее про пример, не проще ли класс задавать?
Галина
Как при загрузке страницы выдать в отдельном popup-окне какой-то текст с галочкой, чтобы если ее поставить, это окно не выдавалось больше никогда.
Что-то типа:

Больше не показывать окно



....

if(localStorage.getItem('popup1')) {

if (document.getElementById('checkbox').checked==true)

document.getElementById('popup').style.display='none';}

...
NMitra
Пример: https://jsfiddle.net/NMitra/4nmg6r22/

<input type="checkbox" id="popupCN">

<script>
window.onkeyup = okno; // нажатие Esc, см. условие "e.keyCode==27"
document.getElementById('popup').onclick = okno;

function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' && e.target.nodeName != 'INPUT' || e.keyCode==27) { // через && перечисляются теги, клинкув на которые окно не будет закрыто; сюда же можно включить тег A или IFRAME
document.getElementById('popup').style.display='none';
}
}
document.getElementById('popupCN').onclick = function() {
if(this.checked) {
localStorage.setItem('popup1', "true");
}
}
if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}
</script>
Галина
Спасибо, везде работает кроме IE(