Плагин всплывающих блоков/форм для сайта 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". Если у вас что-то работает неправильно - свертись с примером, приложенным в виде архива к данной статье.
Принцип работы универсального плагина всплывающих форм
Универсальный плагин всплывающих форм работает по следующему принципу:
- Срабатывает событие клика на элементах, имеющих класс соответствующий маске load--имя_шаблона_подгрузки
- Плагин блокирует повторное нажатие сработавшего элемента
- Событие формирует GET запрос средствами AJAX и jQuery по ссылке /framework/имя_шаблона_подгрузки.php
- В случае успешного ответа на GET запрос плагин добавляет в конец дочерних элементов тега "body" разметку подгружаемого контента
- Не зависимо от исхода GET запроса по завершению AJAX функции скрипт снимает блокировку кнопки.