Модальное окно на jQuery с формой отправки письма
Содержание
Модальное окно на jQuery с формой отправки письма
Здравствуйте, уважаемые читатели XoZbloga! Однажды я уже писал о модальных окнах, то была статья о создании окон для WordPress с помощью плагина Easy Modal Lite. В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!
Просмотр демо страницы и скачивание исходников не доступно
Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!
Что нам понадобится?! не так уж и много:
- библиотека jQuery;
- плагин fancybox;
- сценарий PHP для отправки сообщения.
Разметка
Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox, очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.
Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:
Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:
div id = «inline» >
h2 >Отправка сообщения / h2 >
form id = «contact» name = «contact» action = «#» method = «post» >
label for = «email» >Ваш E-mail / label >
input type = «email» id = «email» name = «email» class = «txt» >
br >
label for = «msg» >Введите сообщение / label >
textarea id = «msg» name = «msg» class = «txtarea» > / textarea >
button id = «send» >Отправить E-mail / button >
/ form >
/ div >
Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.
Изначально форма скрыта:
Стили формы
Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:
.txt <
display : inline-block ;
color : #676767 ;
width : 420px ;
font-family : Arial , Tahoma , sans-serif ;
margin-bottom : 10px ;
border : 1px dotted #ccc ;
padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
>
.txtarea <
display : block ;
resize : none ;
color : #676767 ;
font-family : Arial , Tahoma , sans-serif ;
margin-bottom : 10px ;
width : 500px ;
height : 150px ;
border : 1px dotted #ccc ;
padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
>
.txt : focus ,
.txtarea : focus <
border-style : solid ;
border-color : #bababa ;
color : #444 ;
>
input.error ,
textarea .error <
border-color : #973d3d ;
border-style : solid ;
background : #f0bebe ;
color : #a35959 ;
>
input .error : focus ,
textarea .error : focus <
border-color : #973d3d ;
color : #a35959 ;
>
Для оформления кнопки «Отправить» будем использовать линейный градиент.:
#send <
color : #dee5f0 ;
display : block ;
cursor : pointer ;
padding : 5px 11px ;
font-size : 1.2em ;
border : solid 1px #224983 ;
border-radius : 5px ;
background : #1e4c99 ;
background : -webkit-gradient ( linear , left top , left bottom , from ( #2f52b7 ) , to ( #0e3a7d ) ) ;
background : -moz-linear-gradient ( top , #2f52b7 , #0e3a7d ) ;
background : -webkit-linear-gradient ( top , #2f52b7 , #0e3a7d ) ;
background : -o-linear-gradient ( top , #2f52b7 , #0e3a7d ) ;
background : -ms-linear-gradient ( top , #2f52b7 , #0e3a7d ) ;
background : linear-gradient ( top , #2f52b7 , #0e3a7d ) ;
filter : progid : DXImageTransform .Microsoft .gradient ( startColorstr = ‘#2f52b7’ , endColorstr = ‘#0e3a7d’ ) ;
>
#send : hover <
background : #183d80 ;
background : -webkit-gradient ( linear , left top , left bottom , from ( #284f9d ) , to ( #0c2b6b ) ) ;
background : -moz-linear-gradient ( top , #284f9d , #0c2b6b ) ;
background : -webkit-linear-gradient ( top , #284f9d , #0c2b6b ) ;
background : -o-linear-gradient ( top , #284f9d , #0c2b6b ) ;
background : -ms-linear-gradient ( top , #284f9d , #0c2b6b ) ;
background : linear-gradient ( top , #284f9d , #0c2b6b ) ;
filter : progid : DXImageTransform .Microsoft .gradient ( startColorstr = ‘#284f9d’ , endColorstr = ‘#0c2b6b’ ) ;
>
#send : active <
color : #8c9dc0 ;
background : -webkit-gradient ( linear , left top , left bottom , from ( #0e387d ) , to ( #2f55b7 ) ) ;
background : -moz-linear-gradient ( top , #0e387d , #2f55b7 ) ;
background : -webkit-linear-gradient ( top , #0e387d , #2f55b7 ) ;
background : -o-linear-gradient ( top , #0e387d , #2f55b7 ) ;
background : -ms-linear-gradient ( top , #0e387d , #2f55b7 ) ;
background : linear-gradient ( top , #0e387d , #2f55b7 ) ;
filter : progid : DXImageTransform .Microsoft .gradient ( startColorstr = ‘#0e387d’ , endColorstr = ‘#2f55b7’ ) ;
>
Fancybox
Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:
Также отменяем стандартное действие формы submit (отправить), это позволит нам использовать свой собственный ajax запрос. При вызове метода я не использовал не одного параметра, оставил все значения по умолчанию. Однако о них стоит упомянуть:
| Название | Описание |
| padding | Отступы до содержимого в окне (По-умолчанию 15px) |
| margin | Расстояние от краев браузера до окна (По-умолчанию 20px) |
| width | Ширина по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 800px) |
| height | Высота по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 600px) |
| minWidth | Минимальная ширина окна (По-умолчанию 100px) |
| minHeight | Минимальная высота окна (По-умолчанию 100px) |
| maxWidth | Максимальная ширина окна (По-умолчанию 9999px) |
| maxHeight | Максимальная высота окна (По-умолчанию 9999px) |
| autoSize | Если «true», то autoHeight и autoWidth также «true» (По-умолчанию true) |
| autoHeight | Если установлен «true», для «inline», «AJAX» и «HTML» содержимого высота определяется автоматически (По-умолчанию false) |
| autoWidth | Если установлен «true», для «inline», «AJAX» и «HTML» содержимого ширина определяется автоматически (По-умолчанию false) |
| autoResize | Если установлено «true», то размер содержимого будет изменяться вместе с изменением окна |
| autoCenter | Если установлено «true», то содержимое будет по центру |
| fitToView | Если установлено «true», то окно будет подстроено под размер браузера перед открытием (По-умолчанию true) |
| aspectRatio | Если установлено «true», то изменение размера ограничено соотношением сторон (По-умолчанию false) |
| topRatio | Вертикальное позиционирование. Если установлено 0.5 то расстояние до верха и низа окна браузера будет одинаково. Если 0 то модальное окно будет сверху (По-умолчанию 0.5) |
| leftRatio | Аналогичный параметр только для горизонтального позиционирования (По-умолчанию 0.5) |
| scrolling | Показывать полосы прокрутки. Может быть установлено ‘auto’, ‘yes’, ‘no’ или ‘visible’ (По-умолчанию auto) |
| wrapCSS | Настраиваемый класс CSS |
| arrows | Если установлено «true», то будут отображаться навигационные кнопки (По-умолчанию true) |
| closeBtn | Если установлено «true», то кнопка закрыть окно будет отображаться (По-умолчанию true) |
| closeClick | Если «true», то при нажатии на содержимое окно закроется (По-умолчанию false) |
| nextClick | Если установлено «true», то в галерее при нажатии на содержимое будет переход к следующей картинке (По-умолчанию false) |
| mouseWheel | Если «true», то галерею можно прокручивать с помощью колесика мыши (По-умолчанию true) |
| autoPlay | Если «true», то при открытии первого элемента галерее начнется слайдшоу (По-умолчанию false) |
| playSpeed | Скорость слайдшоу (По-умолчанию 3000 миллисекунд) |
| preload | Количество картинок миниатюр под основным изображением (По-умолчанию 3) |
| modal | Если «true», навигация и кнопка закрытия будет отключена (По-умолчанию false) |
| loop | Если «true», то в галерее после достижения конца, начнется заново (По-умолчанию true) |
| ajax | Опция для ajax запроса |
| iframe | Опция для управления iframe |
| swf | Опция для управления swf содержимым |
| keys | Можно определить клавиши для навигации по слайдшоу |
| direction | Направление навигации |
| scrollOutside | Если установлено «true», то сценарий будет избегать создания полос прокрутки (По-умолчанию true) |
| index | Переопределяет индекс группы начала (По-умолчанию 0) |
| type | Переопределяет тип содержимого. Поддерживаемые типы «image», «inline», «AJAX», «IFRAME», «SWF» и «HTML» (По-умолчанию null) |
| href | Переопределяет ссылкой источник контента (По-умолчанию null) |
| content | Переопределяет содержимое, которое будет отображаться (По-умолчанию null) |
| title | Переопределяет заголовок, можно установить любой HTML (По-умолчанию null) |
| tpl | Объект, содержащий различные шаблоны |
| openEffect / closeEffect / nextEffect / prevEffect | Эффект анимации для действий, возможны значения ‘fade’, ‘fade’, ‘elastic’, ‘elastic’ |
| openSpeed / closeSpeed / nextSpeed / prevSpeed | Скорость анимации (По-умолчанию 250) |
| openEasing / closeEasing / nextEasing / prevEasing | Easing метод для каждого типа перехода (По-умолчанию swing) |
| openOpacity/ closeOpacity | Если установлено «true», то меняется прозрачность (По-умолчанию true) |
| openMethod/ closeMethod/ nextMethod/ prevMethod | Эффект transition может принимать значения ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’ |
| parent | Родительский элемент в контейнере. Это полезно для ASP.NET, где верхний элемент является «формой» (По-умолчанию body) |
И это еще не все. На странице автора Вы также сможете найти специальные функции для плагина и callback методы, ссылка в начале статьи.
Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:
Отправка сообщения
Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:
Базовая HTML-структура попап-окна
Для начала, создадим базовую HTML-структуру для нашего модального окна. Она будет состоять из двух частей. Первая — div с классом «popup-bg», который будет использоваться для затемнения остального сайта при открытии попап-окна. Вторая часть — div с классом «popup». Это и будет телом нашего окна, в котором мы будем располагать весь контент. Так же я добавил картинку крестика с классом «close-popup». Данный класс нам понадобиться в будущем для закрывания окна. Картинку я поместил внутрь «popup». Вместо картинки вы можете сделать крестик с помощью CSS.
Всего комментариев: 5
Привет, а может подскажешь, плагин окон поддерживающих из коробки функции перетаскивания и загрузку iframe через атрибут html ссылки
dialog jquery ui к сожалению не подходит ( . .)
или какой нибудь другой способ открытия нескольких iframe, но не загораживающих контент сайта?
Так на вскидку, могу предложить посмотреть в сторону этого плагина: Тынц или же прикрутить Draggable к любому модальному окну
Здраствуйте! А как сделать так, чтобы окно появлялось на пару секунд(приветсвтвие посетителям) и потом само исчезало? Заранее огромное спасибо!
Привет всем кто меня видит и слышит, подскажите как сделать чтобы в модальное окно прокручивалось если много контента?
модальные окна на этом ресурсе… не модальные.!
они закрываются при нажатии кнопки вне области окна!
Оставить комментарий Отменить ответ
- Дмитрий к записи Адаптивные изображения с помощью CSS
- софия к записи Как сделать простое адаптивное меню с помощью CSS3
- driver к записи Модальные всплывающие окна с помощью CSS3 без Javascript
- Марина Русамура к записи Модальные всплывающие окна с помощью CSS3 без Javascript
- Александр к записи 5 Вариантов одного меню аккордеон
- HTML & CSS
- Javascript
- jQuery
- Windows
- WordPress
- Веб-Дизайн
- Веб-Приложения
- Видеоуроки
- Графика
- Инструменты
- Интересное
- Интернет
- Новости
- Программы
- Сниппеты
- Уроки
- Шаблоны сайтов
Разработка тем для WordPress
Приобретая данный курс, вы получаете целостный продукт, в котором есть всё необходимое для изучения и работы с WordPress
Создать сайт бесплатно
Надёжный хостинг BeGet.ru
Конструктор сайтов Setup.ru
