0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Модальное окно на jQuery с формой отправки письма

Модальное окно на jQuery с формой отправки письма

Здравствуйте, уважаемые читатели XoZbloga! Однажды я уже писал о модальных окнах, то была статья о создании окон для WordPress с помощью плагина Easy Modal Lite. В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Что нам понадобится?! не так уж и много:

  • библиотека jQuery;
  • плагин fancybox;
  • сценарий PHP для отправки сообщения.

Разметка

Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox, очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.

Статья в тему:  Программа для сканирования мф 4018

Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:

Где значение атрибута 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

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector