Атрибутом каждого современного сайта, сервиса или портала является динамические всплывающие формы с дополнительным контентом или действиями на странице. В статье мы рассмотрим наши собственный наработки по универсальному решению задачи всплывающих форм с любым содержимым средствами 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 функции скрипт снимает блокировку кнопки.

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

21/08/2020

В этой статье Мы покажем Вам, как сделать блок с числом, которое можно ввести с помощью клавиатуры и регулировать при помощи кнопок “плюс”\“минус”. Этот способ, например, может пригодиться в интернет-магазинах для указания количества единиц покупаемого товара.

Плагин управления количеством для сайта jQuery, CSS - инструкция, примеры
Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры

18/02/2020

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

Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры
Плагин плиточной навигации для сайта JavaScript/jQuery

06/06/2017

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

Плагин плиточной навигации для сайта JavaScript/jQuery
Плагин универсальной отправки формы на E-mail с проверкой для сайта

22/09/2016

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

Плагин универсальной отправки формы на E-mail с проверкой для сайта