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

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

Скачать плагин

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

Универсальный плагин всплывающих блоков состоит из основных частей:

Установка примера плагина на хост веб-сервера

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

/css/style.css              // Файл основных стилей
/css/font-awesome.css       // Файл стилей шрифта FontAwesome
/fonts/*                    // Файлы шрифта
/js/script.js               // jQuery скрипт динамической подгрузки
/images/exit.png            // Изображение кнопки закрытия блока
/framework/*                // Каталог файлов-шаблонов подгружаемого контента
index.html                  // Пример использования плагина

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

http(https)://domen.domen/path/to/dir/index.html

Если у нас открылась презентационная страница с описанием и двумя кнопками - все сделано верно.

Далее мы экспериментируем с кнопками "ФОРМА" и "ТЕКСТ".

Установка и интеграция плагина всплывающих форм на сайт

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

1. Копировать следующий перечень файлов и каталогов:

/js/script.js               // jQuery скрипт динамической подгрузки
/images/exit.png            // Изображение кнопки закрытия блока
/framework/*                // Каталог файлов-шаблонов подгружаемого контента

2. Копировать или создать свою стилизацию элементов динамической подгрузки по следующему примеру:

.float-box_inset {
  position: relative;
  width: 820px;
  height: 350px;
  padding: 27px;
  background: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  outline: 13px solid rgba(115, 7, 50, 0.6);
  margin: 20px auto;
  font-size: 16px;
  color: black;
  margin-top: 117px;
}

.float-box_inset a {
  color: #5a7f80;
}

.float-box {
  position: fixed;
  z-index: 1000;
  top: -21px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9000;
}

.float-box .exit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: url("/images/exit.png") no-repeat scroll center top transparent;
}

.float-box .exit:hover {
    background-position: center bottom;
}

3. Создать новую или отредактировать существующую разметку по следующему примеру:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

<a href="#" class="load--form">ФОРМА</a>

Для работы плагина к кнопкам, ссылкам или другим элементам HTML разметки необходимо присвоить значение класса по маске load--имя_шаблона_подрузки

4. В результатам выполниться jQuery обработка нажатия элемента с совпадающей маской класса, который формирует AJAX запрос.

Результат работы скрипта должен добавить в конец корневых дочерних элементов тега "body" тег "section" с классом "float-box". Если у вас что-то работает неправильно - свертись с примером, приложенным в виде архива к данной статье.

Принцип работы универсального плагина всплывающих форм

Универсальный плагин всплывающих форм работает по следующему принципу

1. Срабатывает событие клика на элементах, имеющих класс соответствующий маске load--имя_шаблона_подгрузки

2. Плагин блокирует повторное нажатие сработавшего элемента

3. Событие формирует GET запрос средствами AJAX и jQuery по ссылке /framework/имя_шаблона_подгрузки.php

4. В случае успешного ответа на GET запрос плагин добавляет в конец дочерних элементов тега "body" разметку подгружаемого контента

5. Не зависимо от исхода GET запроса по завершению AJAX функции скрипт снимает блокировку кнопки.

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Плагин DateTimePicker для сайта - инструкция, настройка, инициализация

05/02/2019

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта - инструкция, настройка, инициализация
Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация

23/01/2019

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

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

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое, выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

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

TinyMCE вырезает теги - исключения для тегов TinyMCE
Cвойства и методы TinyMCE - вставка тегов, вывод значений

21/09/2016

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

Cвойства и методы TinyMCE - вставка тегов, вывод значений
Установка и настройка TinyMCE - инициализация и параметры

21/09/2016

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE - инициализация и параметры
Установка и настройка jCarousel - параметры и методы

20/09/2016

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации; рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel - параметры и методы
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие, кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса
Плагин плиточной навигации для сайта JavaScript/jQuery

06/06/2017

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

Плагин плиточной навигации для сайта JavaScript/jQuery