Как сделать всплывающее окно на сайте

Я вас приветствую! Разговор пойдет о том, как сделать всплывающее окно на сайте, оно же Popup. Он может быть на WordPress, Joomla или просто HTML страничка. У меня уже есть несколько публикаций на тему создания модальных окон, но эта инструкция не будет лишней, так как мы затронем некоторые нюансы, о которых раньше не было упомянуто.

Но перед тем, как начать, нужно выяснить когда всплывающее окно будет появляться. Например при нажатии на какой-то элемент (кнопку, ссылку, текст), при наведении на него, при закрытии страницы или при скролле. Второй момент — это ЧТО будет находится внутри. Это может быть форма авторизации или подписки, рекламная информация или уведомление для посетителей. Все эти факторы необходимо учесть, чтобы понимать в какое время показывать всплывающее окно. Будем рассматривать сразу несколько сценариев развития событий.

Верстаем всплывающее окно на HTML и CSS

Займемся подготовкой будущего попапа. Что нужно сделать:

• Задать размеры окна
• Задать оформление через CSS
• Внести необходимые данные

HTML разметка

1
2
3
4
5
6
7
8
9

<div class="block-popup">
  <h3>Оставьте свой Email, чтобы не пропускать новых выпусков</h3>
  <form>
    <input type="email" placeholder="Введите email" name="email-popup"/>
    <input type="button" name="btn-form-popup" value="Отправить"/>
  </form>
  <span>&times;</span>
</div>
<div class="overlay"></div>

CSS стили оформления

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.block-popup{
  position: absolute;
  background: #fff;
  width: 37%;
  height: 135px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 12px 20px -10px;
  text-align: center;
  display: none;
}
.block-popup span{
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

И не забываем про overlay. Это затемнение фона. Стили для него будут такими:

1
2
3
4
5
6
7
8
9

.overlay {
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.78);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

В результате должно получится что-то вроде этого:

Я бы не сказал, что это прям окно, скорее небольшое всплывающее окошко. Теперь нам нужно его запрограммировать. Будем это делать конечно же на JS, он же JavaScript. А вот библиотека jQuery для таких задач подходит идеально. Итак, сначала сделаем всплывающее окно при клике. Для этого элементу, на котором будем кликать зададим специальный класс под названием open-modal. И при нажатии на крестик будем его закрывать.

jQuery

1
2
3
4
5
6

$('.open-modal').click(function(){
  $('.block-popup, .overlay').fadeIn();
})
$('.block-popup span').click(function(){
  $('.block-popup, .overlay').fadeOut();
})

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

Еще один вариант, это когда появление окна происходит при скроллинге до определенного блока. Этому способу посвящен целый пост с демонстрацией и примерами кода.

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

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

1
2
3

setTimeout(function(){
  $('.block-popup').fadeIn();
},10000)

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

Здесь не все так однозначно. Дело в том, что мы не можем сделать так, чтобы при закрытии вкладки браузера всплывало созданное нами окно. Мы сможем показать только стандартный Алерт. делается это так:

1
2
3

$(window).on('beforeunload', function () {
  return "Хотите уйти?";
});

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

1
2
3
4
5

$(window).mouseleave(function(e){
    if (e.clientY < 0) {
        $('.block-popup, .overlay').fadeIn();
    }     
})

Всплывающее окно при наведении на элемент

1
2
3

$('.open-modal').mouseover(function(){
    $('.block-popup, .overlay').fadeIn();
})

А чтобы показывать это окно только один раз, прочитайте про Cookie. И в завершении предлагаю посмотреть все примеры на отдельной странице. При желании такую штуку можно прикрутить к сайту на Tilda или Wix, если вам не понравились встроенные или просто использовать готовые варианты от Bootstrap.

Демо