RBAND

Другой город

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

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

Forma.jpg

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

Ведущий разработчик

Скажи автору «спасибо», поделись с друзьями