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

Содержание:

Модальное окно
JS JSON
HTML-разметка всплывающего окна.
Начнем с простого
CSS
ИЗОБРАЖЕНИЯ
Как выбрать телевизор для игр на Плейстейшен 4 и 3
HTML и CSS код модального окна
Описание скрипта модального окна
Как сделать всплывающее окно на сайте WordPress
CSS:
Сравнительная таблица сервисов pop-up окон для сайта
Рейтинг качественных моделей на 2020 год
Hello Bar – сервис для создания и тестирования баннеров

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

Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #okno:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="okno">
	  Всплывающее окошко!<br>
	  <a href="#" class="close">Закрыть окно</a>
    </div>
	
	<a href="#okno">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :

<div id="zatemnenie">
  <div id="okno">
	Всплывающее окошко!<br>
	<a href="#" class="close">Закрыть окно</a>
  </div>
</div>

Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем ссылку вызова окна на него.

У дочернего убираем (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  #zatemnenie {
	    background: rgba(102, 102, 102, 0.5);
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	  }
      #okno {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		background: #fff;
	  }
	  #zatemnenie:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="zatemnenie">
      <div id="okno">
	    Всплывающее окошко!<br>
	    <a href="#" class="close">Закрыть окно</a>
      </div>
    </div>
	
	<a href="#zatemnenie">Вызвать всплывающее окно</a>

  </body>
</html>

Попробовать »

JS JSON

Краткая справка по fancybox 3. галерея, модальные окна, видео к «окошке»

HTML-разметка всплывающего окна.

Шаблоны css3 для кнопок

Мы не будем создавать сложную вёрстку на HTML. Создадим overlay, два всплывающих окна и по две кнопки для каждого pop-up, которые их будут открывать. Вёрстка будет практически одинаковая для всех вариантов анимации открытия и закрытия всплывающих окон.

Начнём с интерактивных элементов — кнопок, которые будут открывать наши всплывающие окна:

XHTML

<div class=»wrap»>
<h1>Всплывающие окна.</h1>
<div class=»btn-box»>
<!— копки открытия первого окна —>
<button type=»button» class=»btn btn-default» data-modal=»modal_1″>Показать pop-up 1</button>
<button type=»button» class=»btn btn-default» data-modal=»modal_1″>Показать pop-up 1</button>
<!— копки открытия второго окна —>
<button type=»button» class=»btn btn-success» data-modal=»modal_2″>Показать pop-up 2</button>
<button type=»button» class=»btn btn-success» data-modal=»modal_2″>Показать pop-up 2</button>
</div>
<div class=»overlay» data-close=»»></div>

<div id=»modal_1″ class=»dlg-modal»>
<span class=»closer» data-close=»»></span>
<h3>Всплывающее окно 1</h3>
</div>
<div id=»modal_2″ class=»dlg-modal»>
<span class=»closer» data-close=»»></span>
<h3>Всплывающее окно 2</h3>
</div>
</div>

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

<h1>Всплывающие окна.</h1>

<!— копки открытия первого окна —>

<button type=»button»class=»btn btn-default»data-modal=»modal_1″>Показать pop-up 1</button>

<!— копки открытия второго окна —>

<button type=»button»class=»btn btn-success»data-modal=»modal_2″>Показать pop-up 2</button>

</div>

<h3>Всплывающее окно 1</h3>

</div>

<h3>Всплывающее окно 2</h3>

</div>

Обратите внимание на атрибут , который прописан у каждой кнопки. В нём указывается всплывающего окна, которое эта кнопка открывает

Вы, наверное, заметили, что у некоторых элементов ( и ) присутствует атрибут . С помощью этого атрибута можно определить все элементы на странице, которые могут закрыть всплывающие окна. В частности, — это крестик в правом верхнем углу соответствующего pop-up.

Начнем с простого

Создаем всплывающие окна popup

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

Итак, сама разметка веб-страницы вмещается в несколько строк, потому что весь сок состоит в правильной стилизации.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Popup window</title>
</head>
<body>
<a href="#b" id="button">Нажми на меня</a>
<a href="#x" class="overlay" id="b"></a>
   <div class="window">
     <img src="http://www.sunhome.ru/UsersGallery/Cards/prazdnik_den_zemli_kartinka.jpg"/> 
    <a class="close" title="Закрыть" href="#close"></a>
    </div>
</body>
</html>

Как видите, все очень просто. А теперь перейду к каскадным таблицам. Вот там-то кода будет много, но он опять-таки легкий.

<style>
/*Затемнение дисплея*/
.overlay {
    background-color: rgba(1, 0, 0, 0.77);
    right: 0;
    left: 0;
    position: fixed; 
    top: 0;
    bottom: 0;
    z-index: 11;
    display: none;
}
/*Слой становится видимым*/
.overlay:target {
    display: block;
}
/*Растягиваю картинку на всю ширину попапа*/
.window img { 
   width: 100%;
}
/*Характеристики самого окна, которое появляется после клика на кнопке*/
.window {
    left: 50%;
    z-index: 12;
    margin: 0;
    position: fixed;
    padding: 15px;
    border: 1px solid #383738;
    background: #fefeff;
    border-radius: 15px;
    box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31);
    transform: translate(-50%, -450%);
    transition: transform 0.6s ease-out;
}
/*Появление модального окошка с верхнего края экрана*/
.overlay:target+.window {
    transform: translate(-50%, 0);
    top: 17%;
}
/*Внешний вид кнопки «Закрыть»*/
.close {
    top: -11px;
    right: -11px;
    width: 23px;
    height: 23px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccd;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.81);
    box-shadow: 0 0 12px #010;
    text-align: center;
    text-decoration: none;
    font: 18px sans-serif;
    font-weight: bold;
    transition: all ease .9s;
}
.close:before {
    color: rgba(254, 254, 254, 0.89);
    content: "X";
    text-shadow: 0 1px 3px #010;
    font-size: 14px;
}
/*Изменение характеристик при наведении на область */
.close:hover {
    background-color: rgba(253, 21, 0, 0.83);
    transform: rotate(360deg);    
}
/*Оформление главной кнопки*/
#button {
  margin-left: 40%;
font-size: 33px;
  border-radius: 11px;
    background-color: rgba(63, 63, 63, 0.9);
    box-shadow: 0 3px 10px #010;
    text-align: center;
    text-decoration: none;
   background: #DCDCDC; 
    padding: 6px 17px; 
}
</style>

CSS

.fond {
 position:absolute;
 padding-top:45px;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:#f8b334;
}
.mymagicoverbox {
 display:inline-block;
 color:#ffffff;
 padding:10px;
 margin:10px;
 cursor:pointer;
 font-weight:300;
 font-family:'Roboto';
}
.mymagicoverbox_fenetre {
 z-index:9999;
 position:fixed;
 margin-left:50%;
 top:100px;
 text-align:center;
 display:none;
 padding:5px;
 background-color:#ffffff;
 color:#97BF0D;
 font-style:normal;
 font-size:20px;
 font-weight:300;
 font-family:'Roboto';
}
.mymagicoverbox_fenetreinterieur {
 text-align:center;
 overflow:auto;
 padding:10px;
 background-color:#ffffff;
 color:#666666;
 font-weight:400;
 font-family:'Roboto';
 font-size:17px;
 border-top:1px solid #e7e7e7;
 margin-top:10px
}
.mymagicoverbox_fermer {
 color:#CB2025;
 cursor:pointer;
 font-weight:400;
 font-size:14px;
 font-style:normal
 font-family:'Roboto';
}
#myfond_gris {
 display: none;
 background-color:#000000;
 opacity:0.7;
 width:100%;
 height:100%;
 z-index:9998;
 position:fixed;
 top:0;
 bottom:0;
 right:0;
 left:0;
}

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Как выбрать телевизор для игр на Плейстейшен 4 и 3

При выборе телевизора для PlayStation 3 и 4 следует учитывать не только марку устройства

Чтобы понять, какой телевизор нужен, чтобы получить отличное качество изображения, требуется принять во внимание тип матрицы, разрешение и качество картинки, частоту обновления кадра

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

Производитель

Лучшее качество изображения обеспечивают телевизоры производства компаний Sony, Philips, LG, Samsung, Panasonic. Также можно выбрать технику менее известных бюджетных производителей.

Если учесть все требования к телевизионной панели, картинка в таком случае будет ненамного хуже, чем при покупке устройства от известного бренда.

Тип матрицы

На современных телевизорах устанавливаются следующие типы матриц:

TN;
IPS;
VA.

TN матрицы имеют низкую стоимость, маленькое время отклика и устанавливаются на бюджетных моделях телевизоров. Отличаются слабым углом обзора и низкой передачей цветов.
IPS матрицы выделяются средним временем отклика, отличной цветопередачей и широким углом обзора. Недостаток – высокая стоимость.

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

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

Матовая поверхность отлично себя проявляет при любом свете.

Размер диагонали

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

Качество и разрешение

Игровые приставки Сони Плейстейшен 3 и 4 имеют разрешение Full HD и 4K, а значит, телевизионный приемник также должен поддерживать стандарт 1920х1080.

Телевизор для PS4 pro должен воспроизводить картинку в формате 4K, потому что данная консоль способна передавать сигнал в разрешении Ultra HD.

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

Обновление кадра картинки

В недорогих телеприемниках частота обновления равна 50-60 Гц. При этом качество изображения тем лучше, чем выше этот параметр. Особенно ярко этот показатель проявится во время просмотра динамичных сцен.

Если смена кадров медленная, изображение будет нечетким и смазанным. Поэтому лучшим телевизором для игровых консолей станет техника с частотой от 100 Гц и выше.

HTML и CSS код модального окна

HTML разметка модального окна:

<div id="openModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Название</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="modal-body">    
        <p>Содержимое модального окна...</p>
      </div>
    </div>
  </div>
</div>

Ссылка, с помощью которой осуществляется открытие модального окна:

<!-- openModal - id модального окна (элемента div) -->
<a href="#openModal">Открыть модальное окно</a>

CSS модального окна:

/* стилизация содержимого страницы */
body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
} 
  
/* свойства модального окна по умолчанию */
.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* цвет фона */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* при отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
      margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */ 
.modal-content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* свойства для заголовка модального окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}

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

document.addEventListener("DOMContentLoaded", function(){
  var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
  console.log(scrollbar);
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'hidden';
    document.querySelector('#openModal').style.marginLeft = scrollbar;
  });
  document.querySelector('').addEventListener('click',function(){
    document.body.style.overflow = 'visible';
    document.querySelector('#openModal').style.marginLeft = '0px';
  });
});

Описание скрипта модального окна

В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

Её JavaScript код представлен посредством функции :

$modal = function (options) {
  var
    _elemModal,
    _eventShowModal,
    _eventHideModal,
    _hiding = false,
    _destroyed = false,
    _animationSpeed = 200;

  function _createModal(options) { ... }
  function _showModal() { ... }
  function _hideModal() { ... }
  function _handlerCloseModal(e) { ... }

  _elemModal = _createModal(options || {});
  _elemModal.addEventListener('click', _handlerCloseModal);
  _eventShowModal = new CustomEvent('show.modal', { detail: _elemModal });
  _eventHideModal = new CustomEvent('hide.modal', { detail: _elemModal });

  return {
    show: _showModal,
    hide: _hideModal,
    destroy: function () { ... },
    setContent: function (html) { ... },
    setTitle: function (text) { ... }
  }
};

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

В имеются следующие переменные , , , , , и функции , , , .

Функция предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях , то сохраним её в переменную :

_elemModal = _createModal(options || {});

Переменные и применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

document.addEventListener('show.modal', function (e) {
  // в e.detail содержится ссылка на открываемое модальное окно
  ...
});
document.addEventListener('hide.modal', function (e) {
  // в e.detail находится ссылка на корневой DOM-элемент закрываемого модального окна
  ...
});

Переменные и используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение во время скрытия окна, в остальных моментах — . Вторая переменная хранит или , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

Переменная используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

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

Функция используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

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

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

Также помимо стандартных попапов, некоторые плагины умеют легко создавать и остальные виды всплывающих окон.

Давайте посмотрим на 5 плагинов для создания всплывающих окон, а один полностью настроим для наглядного примера.

Master Popups

Название плагина говорит само за себя. Плагин имеет 25 шаблонов всплывающих окон, 12 форм подписки на рассылку и красивый drag-n-drop редактор.

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

Количество попапов в плагине не ограничено, вы можете делать столько окон, сколько вам нужно. Каждому окну можно задавать свою ширину и высоту, менять цвет заднего фона страницы,

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

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

К сожалению, плагин обновляется не так часто как хотелось бы, тем не менее, он прекрасно работает с последними версиями WordPress.

Из недостатков плагина — он полностью на английском языке.

Popup by Supsystic

Создать лайтбокс за пару минут, выбрав один из 18 типов всплывающих окон и один из 69 адаптивных шаблонов? Легко.

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

Таргетировать всплывающие окна можно по категориям или типам страниц. Также можно делать различные задержки и целые серии попапов с помощью тонких настроек.

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

Плагин часто обновляется, но также не поддерживает русский язык. Однако, пусть английский язык не пугает вас. Администрирование плагина и создание новых окон настолько просто и понятно, что с этим справится любой неопытный пользователь.

Popup Builder — Responsive WordPress Pop up — Subscription & Newsletter

Очень популярный и функциональный плагин. Поддерживает интеграцию практически со всеми более-менее крупными плагинами для создания форм на сайте, поддерживает интеграцию и с конструкторами страниц (Visual Composer, Elemental, DIVI, WPML и другие).

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

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

Плагин постоянно обновляется, имеет более 100 000 скачиваний и основная масса оценок это 5*.

Popup Maker — Popup Forms, Opt-ins & More

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

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

На момент написания статьи плагин имеет более 400 000 установок и более 3 000 наивысших оценок. Кстати, плагин поддерживает русский язык.

Popups by OptinMonster

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

Есть и внутренняя аналитика поведения на всплывашках. Вы можете воспользоваться одним из шаблонов в библиотеке плагина или создать своё модальное окно с помощью drag-n-drop редактора.

Плагин постоянно обновляется и имеет более 1 000 000 активных установок. Русского языка к сожалению в плагине не имеется.

CSS:

Добавляем animate.min.css или animate.css или только классы этой библиотеки, которые используем и:

.modal {
display: none;
background: #337AB7;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
}
.modal_vis {
display: block;
}
.body_block {
overflow: hidden;
margin-right: 17px;
}
#close_modal {
color: #BFE2FF;
font-size: 40px;
font-weight: bold;
font-family: Times, sans-serif;
border-radius: 50%;
border: 4px solid #BFE2FF;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 20px;
cursor: pointer;
position: absolute;
right: 0;
transform: rotate(45deg);
transition: all 0.6s;
box-sizing: content-box;
}
#close_modal:hover {
color: #FFF;
transform: rotate(135deg);
}
.modal_txt {
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
background: #FFF;
padding: 30px;
margin: 100px auto;
max-width: 800px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.modal {

displaynone;

background#337AB7;

positionfixed;

top;

left;

bottom;

right;

z-index99999;

}

.modal_vis {

displayblock;

}

.body_block {

overflowhidden;

margin-right17px;

}

#close_modal {

color#BFE2FF;

font-size40px;

font-weightbold;

font-familyTimes,sans-serif;

border-radius50%;

border4pxsolid#BFE2FF;

width50px;

height50px;

line-height50px;

text-aligncenter;

margin20px;

cursorpointer;

positionabsolute;

right;

transformrotate(45deg);

transitionall0.6s;

box-sizingcontent-box;

}

#close_modal:hover {

color#FFF;

transformrotate(135deg);

}

.modal_txt {

box-shadow4px12pxrgba(0,0,0,0.2),16px20pxrgba(0,0,0,0.2);

background#FFF;

padding30px;

margin100pxauto;

max-width800px;

}

Сравнительная таблица сервисов pop-up окон для сайта

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

	OptinMonster	Plerdy	Hello Bar	Getsitecontrol	MailMunch
Бесплатная версия	Нет	Да	Да	Нет	Да
Тестовый период	Нет, только возврат денег в течение 14 дней	14 дней	Нет	7 дней	Нет
Стоимость	от $9/месяц	от $29 в месяц	от $29 в месяц	от $9/месяц	от $15/месяц
Таргетирование	Да	Да	Да	Да	Да
A/B-тестирование	Да	Нет	Да	Да	Да
CSS-редактор	Да	Нет	Нет	Да	Да

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

Рейтинг качественных моделей на 2020 год

Hello Bar – сервис для создания и тестирования баннеров

У Hello Bar, в отличие от предыдущих сервисов, только одна функция — создание баннера

Он закрепляется в верхней части сайта и решает разные задачи: приветствует пользователей, сообщает об акциях и скидках, направляет посетителей к важному контенту, собирает адреса электронной почты

Главное достоинства Hello Bar — возможность создавать разные баннеры в зависимости от контента страницы. Например, в блоге можно вывести окно с предложением подписаться на новости, а в магазине показать панель с информацией о скидке по промо-коду. На старших тарифах количество не ограничено: вы можете создавать новый баннер хоть для каждой страницы, а затем сравнивать их показатели с помощью A/B-тестирования.

Плюсы:

Шаблоны и автоматическое определение цвета для быстрого создания подходящего дизайна.
Адаптивный дизайн.
Большой выбор целей для всплывающих окон.
A/B-тестирование для выбора наиболее эффективных баннеров.
Простые настройки для таргетирования по дате, типу устройства, местоположению клиента на сайте, времени нахождения на странице.
Интеграция с другими сервисами маркетинга и рассылок.

Минусы:

Высокая стоимость.
Бесплатный тариф подходит только для изучения базовых возможностей сервиса.

Стоимость:

Бесплатный тариф — не более 5000 просмотров баннера в месяц, не более 10 всплывающих окон, базовые возможности для изменения дизайна, таргетирование только по типу устройства, 1 сравнительный тест, стандартные возможности для интеграции с другими маркетинговыми сервисами, отображение логотипа Hello Bar.
Growth ($29 в месяц) — до 50 000 просмотров, безлимитное количество всплывающих окон, продвинутые инструменты кастомизации и возможности для таргетирования, неограниченное A/B-тестирование, продвинутые возможности для интеграции, удаление логотипа Hello Bar.
Elite ($99 в месяц) — до 500 000 просмотров, премиальные настройки дизайна, возможности таргетирования и интеграции, приоритетная техническая поддержка.

При оплате тарифа на год 2 месяца вы получаете в подарок.