Как создать онлайн сервис конструктора всплывающих окон?

Как всплывающие окна используются сегодня

Существует много методов для загрузки и отображения данных на странице с помощью JavaScript. Но иногда всплывающие окна работают лучше всего.

Преимущества технологии:

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

Сравнительная таблица

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

1) Цены

Бесплатный тариф
Тестовый период
Стоимость минимального тарифа

2) Ограничения при бесплатном использовании

3) Окна

Типы окон
Варианты отображения
Настройки показа
Шаблоны

4) А/В тест

6) Акции/партнерка

Дополнительно для каждого сервиса указали доступные языки.

Способ установки не вынесли отдельным критерием. Он одинаков — устанавливается код на нужные страницы сайта.

У каждого сервиса есть статистика и адаптивный дизайн, но по некоторым есть замечания, они описаны в тексте.

Сравнительная таблица сервисов по созданию pop-up

Всплывающее окно wordpress – главные настройки.

В этом разделе располагаются главные настройки вашего плагина. Все они переведены на русский и около каждого располагается подсказка, для чего нужна та или иная настройка. Некоторые из них помечены значком “Pro” – это означает, что настойка будет доступна только после того, как вы приобретете платную версию всплывающего окна wordpress.

Следующий раздел:

Дизайн всплывающего окна wordpress.

Про этот раздел стоит поговорить отдельно, так как он содержит дополнительные очень полезные подразделы. Не забывайте и о том, что после того, как вы вносите какие-то изменения, нужно в обязательном порядке нажимать кнопку – “Сохранить” – иначе изменения не сохраняться и вам придется все настраивать заново.

Здесь находятся специальные подразделы:

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

Логин/Регистрация всплывающего окна wordpress.

Даная настройка, к сожалению, является платной функций. Если вы считаете, что вам она необходима – рекомендую приобрести плагин:

И в этом случае данный раздел является платным:

Статистика всплывающего окна wordpress.

На момент того, как я тестировал плагин и у меня не отображались показатели статистики, но на момент того, как я пишу эту статью плагин зафиксировал 3 показа окна.

CSS/HTML-код всплывающего окна wordpress.

В большинстве своем данный пункт редко кем используется. Проводить в нем изменения вы можете, если знаете языки CSS и HTML – в противном случае, я бы не рекомендовал вносить корректировки в код:

Я не стал “выпендриваться” и сделал стандартное всплывающее окно wordpress, вот как оно выглядит:

Надеюсь статья вам понравилась и вы захотите воспользоваться данным плагином для создания PopUP.

P.S. Во все необязательно покупать платную версию плагина, функционала бесплатной версии вполне себе достаточно.

Пример простого popup-окна

Откроем окно с минимальным набором параметров, чтобы понять, какие из них браузер позволит отключить:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Большая часть параметров отключено и окно расположено за пределами экрана. Запустите этот код и посмотрите, что произойдет.

Большинство браузеров самостоятельно «исправляет» такие ошибки, как нулевое значение свойств width/height и размещение окна за пределами экрана в параметрах left/top. Например, браузер Google Chrome открывает такое окно с полной шириной и высотой, поэтому окно занимает весь экран.

Добавим корректные значения width, height, left, top:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

Большинство браузеров отображают приведенный выше пример правильно.

Правила для не использованных в примерах параметров:

Если в open не указан третий аргумент или он пуст, тогда используются параметры окна по умолчанию.
Если есть строка конфигурации params, но некоторые свойства yes/no пропущены, то они отключаются (если это разрешено браузером).
Если в строке params отсутствуют значения left/top, браузер попытается открыть новое окно рядом с последним открытым.
Если отсутствуют значения width/height, у нового окна будет тот же размер, что и у предыдущего открытого окна.

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

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

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

HTML разметка

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>×span>
div>
div class="overlay">/div>

Оставьте свой Email, чтобы не пропускать новых выпусков

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

.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  12px 20px -10px;
  text-align center;
  display none;
}
.block-popup span{
  position absolute;
  top 5px;
  right 5px;
  cursor pointer;
}

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

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

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

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

jQuery

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

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

Разметка HTML

Первый шаг на пути к созданию модального окна — простая и эффективная разметка:

Мы просто создаем ссылку “Открыть модальное окно”, которая указывает на элемент openModal, который размещен ниже. Внешний вид формируется стилями в классе modalDialog.

Внутри элемента размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:

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

Пример простого модального окна, которое может быть создано с использованием CSS3.

Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.

Стили

Создаем класс modalDialog и начинаем формировать внешний вид:

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
}

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

Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index.

В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.

Может быть вы не знаете свойство pointer-events, но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog, так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target”.

Теперь добавляем псевдо класс :target и стили для модального окна.

.modalDialog:target {
	display: block;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events.

Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.

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

Теперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

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

Доступ к popup-окну

Вызов open возвращает ссылку на новое окно. Его можно использовать для управления свойствами окна, изменения местоположения и т.д.

В примере, приведенном ниже, показано, как меняется содержимое нового окна после загрузки.

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

newWindow.onload = function() {
  let html = `Welcome!`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Для окон с URL, указывающими на другие сайты, можно поменять адрес источника, назначив newWindow.location=. Но нельзя получить доступ к содержимому. Это делается с целью обеспечения безопасности пользовательских данных.

Фокусировка popup-окна

Для фокусировки и снятия фокуса с окна существуют такие методы, как window.focus() и window.blur() . Также есть события focus/blur, которые позволяют сфокусировать окно и поймать момент, когда посетитель переключается на другой элемент сайта.

В недавнем прошлом плохие страницы этим злоупотребляли. Например, посмотрите на приведенный ниже код:

window.onblur = () => window.focus();

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

Существуют ограничения, которые запрещают подобный код. Они зависят от конкретного браузера.

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

Тем не менее, кое-что можно сделать. Например:

Когда мы открываем всплывающее окно, можно запустить в нем newWindow.focus() . Это гарантирует, что пользователь будет находиться в новом окне.
Если нужно проследить, когда посетитель использует наше веб-приложение, можно отслеживать события window.onfocus/onblur. Это позволяет нам приостанавливать/возобновлять действия на странице, анимацию и т. д.

Заключение

Всплывающее окно можно открыть вызовом метода open(url, name, params). Он возвращает ссылку в новое окно.
По умолчанию браузеры блокируют вызовы open, если они не были инициированы действиями пользователя. Обычно появляется уведомление, в котором пользователь может самостоятельно разрешить появление всплывающего окна.
Всплывающее окно может получить доступ к окну «opener», применив свойство window.opener. Поэтому главное и всплывающее окна связаны друг с другом.
Главное и всплывающее окна могут изменять друг друга, если у них один источник.
Чтобы закрыть popup-окно, используйте вызов close() . Пользователь тоже может закрыть всплывающее, как и любое другое окно на сайте.
Методы focus() и blur() позволяют наводить фокус и снимать его с окна.
События focus и blur позволяют отслеживать переключение между окнами.

Также, если мы открываем всплывающее окно, лучше сообщить об этом пользователю.

Данная публикация представляет собой перевод статьи «Popups and window methods» , подготовленной дружной командой проекта Интернет-технологии.ру