Ваш город Сиэтл
+7 4832590 366

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

2016-10-03

Универсальный плагин всплывающих блоков для сайта jQuery/AJAXУниверсальный плагин всплывающих блоков для сайта jQuery/AJAX

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

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