Разместить всплывающее окно

Создаем всплывающую контактную форму для сайта

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»post-info»> 1 мая, 2013 Просмотрели: 87 548

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

Демо

На мой взгляд, замечательный образец средств взаимодействия с пользователями.

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

HTML-код формы

Ничего сверхъестественного,  максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом,  для дальнейшего формирования внешнего вида формы в css  и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.

   Закрыть
     

Закрыть

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

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

Обратная связь

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

Закрыть

Завершающим штрихом html-разметки нашей формы будет подключение к документу файла стилей , в котором мы и будем формировать все необходимые элементы формы. Подключаем по накатанной, для тех кто не в теме поясню, в разделе между тегами следует прописать такую сточку:

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

Всплывающая контактная формаОбратная связь
	   
		Закрыть
		

Всплывающая контактная формаОбратная связь

Закрыть

Вступление.

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

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

Итак, давайте создадим три всплывающих окна с эффектами анимации: и , которые будет применяться как к подложке (overlay), так и к самому окну. Кроме этого, к одному из всплывающих окон, мы применим js-анимацию, чтобы оно было расположено точно по центру экрана, не зависимо от разрешения монитора и даже после ресайзинга страницы.

Также я уверен, что вам приходилось сталкиваться с ситуациями, когда на одной странице могли выводиться разные всплывающие окна, содержащие, соответственно, разную информацию. Такое часто встречается в лендингах, когда в одном pop-up содержится форма заказа, а в другом предлагают ввести данные для связи с вами. Давайте и мы с вами сделаем точно также.

Теперь настал черёд поговорить об управлении, которое мы сделаем для всплывающего окна.

  1. Открытие всплывающего окна. Один и тот же pop-up может открываться по клику на разные интерактивные элементы, расположенные в разных местах страницы.

  2. Закрытие всплывающего окна. Pop-up мы будем закрывать тремя способами:
    — во-первых, стандартным способом, кликом по крестику в правом верхнем углу всплывающего окна;
    — во-вторых, по клику на любое место экрана вне всплывающего окна, т. е., по оверлею, который перекрывает и затеняет контент страницы и, при этом, занимает всю площадь экрана, имея ширину и высоту равные 100%;
    — в-третьих, клавишей .

Итак, вроде со всем определились и давайте теперь перейдём к созданию непосредственно всплывающего окна.

Открыть всплывающее окно при загрузке страницы

Добавьте блоку класс , тогда pop-up откроется при открытии страницы.

Чтобы окно не открывалось каждый раз, добавляйте данный класс при особых условиях, например, в зависимости от параметра в URL (или от сессии посетителя).

Пример SMARTY блока, окно будет открыто если в URL есть параметр :

{if $smarty.request.open_love == "Y"}cm-dialog-auto-open cm-dialog-auto-size{/if}" id="open_id" title="Заголовок окна">
    

Помню. Книгу раскрыв, ты чуть-чуть шелестела страницами.
Я спросил: «Хорошо, что в душе преломляется лед?»
Ты блеснула ко мне, вмиг узревшими дали, зеницами.
И люблю — и любовь — о любви — для любимой — поет.

Всплывающее окно на uCoz

На все сайты uCoz уже автоматически подключена библиотека jquery, с помощью которой Вы можете создавать Ajax окна. Всплывающее окно на uCoz выводит простое текстовое сообщение. Скрипт также является вариантом простой ссылки с подключением внутри нее JavaScript.

Текст на который нужно нажать, чтобы появилось окно

1 ahref=»javascript://»onclick=»new _uWnd(‘ajax’,’Всплывающее окно на uCoz’,’300′,’100′,{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},’Текст сообщения’)»>Текстнакоторыйнужнонажать,чтобыпоявилосьокноa>

Текст сообщения — собственно сам текст, который будет отображаться в окне (контент). Если Вы хотите вместо обыкновенного текста вставить HTML код, то в данном случае все привычные для HTML языка кавычки » (двойные или одинарные) нужно заменить на \’ (косая с одинарной кавычкой). Хотя все скрипты найденные мною в интернете написаны без такого изменения, на моих сайтах работает только так.

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

Текст на который нужно нажать, чтобы появилось окно

1 ahref=»javascript://»onclick=»new _uWnd(‘ajax’,’Всплывающее окно на uCoz’,’300′,’100′,{autosize:false,modal: false,close:true,header:true,nomove: false,fixed:true},»)»>Текстнакоторыйнужнонажать,чтобыпоявилосьокноa>

Ниже Вы видите предложение на подписку Новостей этого сайта (RSS) — которая оформлена с помощью всплывающего окна, и является еще одним примером использования.

Установка Contact Form 7

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

Contact form 7 в поиске

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

Стандартный код

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Заготовка под обратную связь

Пример создания поля Имя

  1. Выбираем Текст
  2. Если обязательно для заполнения то отмечаем галочкой
  3. Уникальный идентификатор, оставляем без изменения
  4. Значение, которое отображается по умолчанию, что нужно ввести
  5. Если отметить чекбокс, то название поля будет внутри
  6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
  7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Код поле добавления имени

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Панель инструментов

Делаем по аналогии, что получилось.

Готовый код

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Сохранение настроек

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

Вкладка Письмо

  1. Вкладка письмо
  2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
  3. Тема отображается когда письмо придёт на почту
  4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
  5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress

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

Копируем шорткод

Отношение поисковых систем

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

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

Google тоже сообщил, что нужно аккуратнее использовать всплывающие окна, особенно на мобильных. Попадают в зону риска баннеры на весь экран и те, что мешают изучению основной информации на сайте. Еще можно отметить рекомендации от Coalition for Better Ads, на которые ориентируется Google Chrome при блокировке рекламы.

В целом поисковые системы не против всплывающих окон, если они полезны для пользователя.

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

Рекомендации по контенту

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

1. Полезным. Скидка 5% или 100 рублей на баланс вряд ли кого-то привлекут, поэтому предлагайте интересные бонусы.

От такого предложения будет трудно отказаться:

2. Уместным. Не нужно в книжном разделе предлагать купить купальники или автозапчасти. Также сомнительно выводить всплывающее окно на Главной, когда пользователь только зашел на сайт. Дайте ему время изучить основную информацию, перейти на интересующую страницу.

Хорошие варианты

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

Регистрация на сайте уместна, но пользователь только зашел на сайт и так агрессивно нападать на него не стоит:

Наша форма подписки, которая появляется внизу статьи:

3. Понятным. Кратко и прозрачно изложите суть предложения. Длинные сообщения и невнятные условия отталкивают. Обязательно укажите выгоду для клиента.

Лаконичные предложения:

  • «Дарим 1 000 рублей за подписку на наши новости» + форма подписки.
  • «Скидка 20% на первый заказ» + форма регистрации.
  • «Посмотрите похожие товары со скидкой» + ссылка на соответствующий раздел.

Предложение слишком общее:

Пример лаконичного текста:

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

Надпись внизу не сразу заметна:

Симпатично и по делу:

5. С возможностью отказаться. Кнопка «Закрыть» должна быть заметна и удобна для клика.

Кнопка закрытия не сразу заметна:

Заметная небольшая кнопка:

6. Ненавязчивым. Показывайте предложение каждому пользователю один раз. Можно повторять показ не чаще раза в неделю.

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

Слишком большой и яркий баннер, да еще второе окно ниже:

Тоже яркий, но ненавязчивый пример всплывающего окна на сайте:

Описание использования созданной библиотеки для всплывающих сообщений

Библиотека для всплывающих сообщений состоит из 2 файлов («toast.css» и «toast.js»). Преимуществом данной библиотеки является то, что она имеет очень маленький объем (менее 3Кбайт). В отличие от библиотеки jGrowl данный проект имеет реализацию всплывающих сообщений без использования библиотеки jQuery. Что является для некоторых проектов очень важным.

Подключение библиотеки для создания всплывающих сообщений к странице

Подключение библиотеки для создания уведомлений на страницу осуществляется посредством:

  • подключения CSS файла «toast.css» или «toast-with-header.css»
    к странице или включения содержимого одного из этих
    файлов в свой файл стилей;
  • добавления JavaScript файла «toast.js» или «toast-with-header.js»
    на страницу с помощью элемента script или включения содержимого одного из
    этих файлов в свой файл скриптов.
...

...


Создание всплывающих сообщений

Добавление на страницу всплывающих сообщений осуществляется посредством вызова статического метода add функции-конструктора Toast:

Синтаксис кода для всплывающих сообщений с заголовком:

/*
Параметры функции add:
header (строка) - название заголовка
body (строка) - текст сообщения
color (строка) - цвет в формате #rrggbb
autohide (булево) - скрывать ли автоматически всплывающее сообщение
delay (число) - количество миллисекунд, после которых сообщение будет автоматически скрыто
*/
Toast.add({
header: 'Название заголовка',
body: 'Текст сообщения',
color: '#28a745',
autohide: true,
delay: 10000
});  

Для сообщений без заголовка:

/*
Параметры функции add:
text (строка) - текст сообщения
color (строка) - цвет в формате #rrggbb
autohide (булево) - скрывать ли автоматически всплывающее сообщение
delay (число) - количество миллисекунд, после которых сообщение будет автоматически скрыто
*/
Toast.add({
text: 'Текст сообщения...',
color: '#28a745',
autohide: true,
delay: 5000
});

Открываем блок в сплывающем окне по клику

Ссылка, которая откроет pop-up блок должна иметь классы:

  • — размер окна будет соответствовать содержимому.

ID блока который необходимо открыть задаётся параметром .

ID блока должен быть уникальным.

Пример:

a class="cm-dialog-opener cm-dialog-auto-size" data-ca-target-id="open_id">Ссылка-открывашкаa>

div class="hidden" id="open_id" title="Заголовок окна">
    p>
        Я люблю тебя больше, чем Море, и Небо, и Пение,br/>
        Я люблю тебя дольше, чем дней мне дано на земле.br/>
        Ты одна мне горишь, как звезда в тишине отдаления,br/>
        Ты корабль, что не тонет ни в снах, ни в волнах, ни во мгле.
    p>
div>

Витрины информационно-развлекательных услуг Билайн

«Меню Билайн» — интерактивные сообщения с возможностью заказа платного контента/услуги в один клик. Такие сообщения всплывают примерно раз в месяц, поэтому не успевают так выбесить, чтобы Вы ринулись в интернет с поиском решения проблемы.

«SMS+» — эта наглая услуга подсовывает Вам рекламный спам после завершения разговора (голосовой связи).

«SIM+» — а эта услуга «впарит» Вам рекламу сразу после того, как Вы включите свой телефон. Сейчас многие пользователи смартфонов вообще редко выключают свой гаджет, поэтому редко сталкиваются с «SIM+» даже в том случае, если она у них подключена.

«USSD Push» — сообщения, которые предлагают Вам воспользоваться некой услугой или сервисом, как и «Меню Билайн» выскакивают на экране не чаще раза в месяц.

«Инфострока» — текстовые сообщения, в которых Вам предлагаются различного рода услуги с номерами для их подключения, разумеется.

«Хамелеон» — самая отвратительная услуга, которая в течение одного дня может отправлять Вам всплывающие на экране сообщения. Заказ контента или оформление подписки возможно в один клик. Сообщение может всплыть, например, прямо во время игры на смартфоне, что запросто может привести к случайно клику. Если у Вас подключён «Хамелеон», то настоятельно рекомендую немедленно от него избавиться.

Пишем JavaScript для управления всплывающими окнами с помощью CSS3.

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

JavaScript

;(function() {
‘use strict’;

})();

1
2
3
4
5
6

;(function(){

‘use strict’;

})();

 

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

JavaScript

// подложка под всплывающее окно
var overlay = document.querySelector(‘.overlay’),
// коллекция всех элементов на странице, которые могут открывать всплывающие окна
// их отличительной особенность является наличие атрибута »
mOpen = document.querySelectorAll(»),
// коллекция всех элементов на странице, которые могут закрывать всплывающие окна
// их отличительной особенность является наличие атрибута »
mClose = document.querySelectorAll(»),
// флаг всплывающего окна: false — окно закрыто, true — открыто
mStatus = false;

// если нет элементов управления всплывающими окнами, прекращаем работу скрипта
if (mOpen.length == 0) return;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// подложка под всплывающее окно

varoverlay=document.querySelector(‘.overlay’),

// коллекция всех элементов на странице, которые могут открывать всплывающие окна

// их отличительной особенность является наличие атрибута »

mOpen=document.querySelectorAll(»),

// коллекция всех элементов на странице, которые могут закрывать всплывающие окна

// их отличительной особенность является наличие атрибута »

mClose=document.querySelectorAll(»),

// флаг всплывающего окна: false — окно закрыто, true — открыто

mStatus=false;

// если нет элементов управления всплывающими окнами, прекращаем работу скрипта

if(mOpen.length==)return;

 

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

JavaScript

[].forEach.call(mOpen, function(el) {
// вешаем обработчик события на каждый элемент коллекции
el.addEventListener(‘click’, function(e) {
// получаем значение атрибута , которое
// является id всплывающего окна
var modalId = el.getAttribute(‘data-modal’),
// используя id, получаем объект всплывающего окна,
// которое мы собираемся открыть
modal = document.getElementById(modalId);

// вызываем функцию открытия всплывающего окна, аргументом
// является объект всплывающего окна
modalShow(modal);
});
});

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

.forEach.call(mOpen,function(el){

// вешаем обработчик события на каждый элемент коллекции

el.addEventListener(‘click’,function(e){

// получаем значение атрибута , которое

// является id всплывающего окна

varmodalId=el.getAttribute(‘data-modal’),

// используя id, получаем объект всплывающего окна,

// которое мы собираемся открыть

modal=document.getElementById(modalId);

// вызываем функцию открытия всплывающего окна, аргументом

// является объект всплывающего окна

modalShow(modal);

});

});

 

Рассмотрим теперь по шагам работу функции .

Popup в Elementor по кнопке

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.

Выводим параметры элемента в elementor

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

Показ формы связи через elementor

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

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

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

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

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';
  });
});

Таблица стилей для всплывающих окон.

Приведём здесь только стили, относящиеся к анимации на CSS3, всё-такие наша основная задача — прокачать скилл владения JavaScript.

CSS

.fadeIn, .fadeOut, .slideInDown, .slideOutUp {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}

@keyframes fadeIn {
from {opacity: 0; visibility: hidden;}
to {opacity:1; visibility: visible;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
opacity: 1;
visibility: visible;
}

@keyframes fadeOut {
from {opacity: 1; visibility: visible;}
to {opacity:0; visibility: hidden;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
opacity: 0;
visibility: hidden;
}

@keyframes slideInDown {
from {top: -320px;}
to {top: 180px;}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
top: 180px;
}

@keyframes slideOutUp {
from {top: 180px;}
to {top: -320px;}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
top: -320px;
}

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

.fadeIn, .fadeOut, .slideInDown, .slideOutUp {

-webkit-animation-duration0.4s;

animation-duration0.4s;

animation-timing-functionease-out;

}
 

@keyframes fadeIn {

from {opacity;visibilityhidden;}

to {opacity1;visibilityvisible;}

}

.fadeIn {

-webkit-animation-namefadeIn;

animation-namefadeIn;

opacity1;

visibilityvisible;

}
 

@keyframes fadeOut {

from {opacity1;visibilityvisible;}

to {opacity;visibilityhidden;}

}

.fadeOut {

-webkit-animation-namefadeOut;

animation-namefadeOut;

opacity;

visibilityhidden;

}
 

@keyframes slideInDown {

from {top-320px;}

to {top180px;}

}

.slideInDown {

-webkit-animation-nameslideInDown;

animation-nameslideInDown;

top180px;

}
 

@keyframes slideOutUp {

from {top180px;}

to {top-320px;}

}

.slideOutUp {

-webkit-animation-nameslideOutUp;

animation-nameslideOutUp;

top-320px;

}
 

Полный код таблицы стилей вы можете взять из архива. Отметим здесь только некоторые особенности.

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

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

  • 1

    Задаём pop-up отступ слева равным 50% — , при этом его левая граница будет совпадать с центром экрана по горизонтали.

  • 2

    Уменьшим отступ слева на половину ширины pop-up c помощью свойства ‘margin-left’ с отрицательным значением — . Теперь центр по горизонтали у всплывающего окна совпадает с центром экрана.

Установка Popup Maker

Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.

Popup Maker

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

Название и добавление кода

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

Триггер

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

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

Прописываем класс

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

Остальные параметры

Не забываем нажать на опубликовать.

Публикуем

После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.

В запись загрузил изображение с помощью медиафалов.

Редактор WordPress

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

Добавляем class к элементу

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Вкладка визуально

Открывается новая страница в браузере.

Предварительный просмотр

Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.

Рабочая всплывающая форма

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.

Редактирование HTML в Gutenberg

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Ссылка на основную публикацию