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

• Как сделать заставку на сайт
• AdSense только при первом заходе на сайт
• Появляющееся окно по щелчку (см. пример формы "Заказать обратный звонок" для сайта)
• Форма во всплывающем окне (см. пример)
• Создание модального окна, появляющегося при клике на чистом CSS
• Код подсказки, видимой при наведении курсора мышки
• Два события вызывают одну функцию в JavaScript

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

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

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

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

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

обновление блога

Картинки в Blogger привязаны к фото-альбомам в Google+. Чтобы изображения увидели все посетители блога, нужно сделать альбомы общедоступными. Посмотреть подробности.

<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>