Другой город
Начать проект

Плагин всплывающих блоков/форм для сайта JQUERY/AJAX

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

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

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

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

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

  • Динамическая подгрузка дополнительного контента или всплывающих форм
  • Множество шаблонов для динамической подгрузки контента
  • Работа плагина без перезагрузки - AJAX
  • Блокировка кнопок для избежания множественного нажатия
  • Уникальная стилизация любого контента

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

  • HTML разметка с требуемой маской класса
  • JQuery скрипт для динамической подгрузки контента
  • Шаблоны подгружаемого контента
  • CSS стили подгружаемого контента

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

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

/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 функции скрипт снимает блокировку кнопки.

Выберите город