|
|
|
|
 Far |
| WinNavigator |
| Frigate |
| Norton
Commander |
| WinNC |
| Dos
Navigator |
| Servant
Salamander |
| Turbo
Browser |
|
|
| Winamp,
Skins, Plugins |
| Необходимые
Утилиты |
| Текстовые
редакторы |
| Юмор |
|
|
|
File managers and best utilites |
Модальное окно на jQuery с формой отправки письма. Модальное окно браузера
Коллекция модальных окон и форм
Здравствуйте всем. Посмотрел тут на днях внимательно статистику блога и обнаружил, что больший интерес у наших интернет-трудящихся вызывают уроки и примеры по созданию модальных окон. Самыми популярными оказались решения реализации всплывающих окон без использования javascript, исключительно на чистом CSS3.За время работы у меня накопилось немало интересных решений, которые в разное время я детально расписал в развернутых статьях на страницах своего блога, но многие из этих уроков со временем ушли на задний план. Читателям блога иной раз сложно сориентироваться и большая часть работоспособных методов создания эффектных модальных окон и всплывающих форм просто остаются незамеченными.Поэтому, учитывая интерес пользователей к данному вопросу, решил объединить все уроки и примеры по данной теме и вывести в отдельной статье коллекцию модальных окон и форм. Получился небольшой обзор с кратким описанием, ссылками на примеры и статьи. Так что смотрите, изучайте и если кому-то, какое-либо из решений придётся по душе, смело забирайте исходники, и творите, творите, творите...
1. Модальные окна с помощью CSS3 без Javascript
Самый популярный, среди читателей моего блога, метод создания модальных окон. Очень прост в реализации. Формирование внешнего вида всплывающих блоков и весь функционал основаны исключительно на CSS3, без подключения в работу Javascript и дополнительных графических элементов.Возможность подключения и вывода модальных окон практически на любом сайте. Достаточно правильно разместить html-каркас в нужном месте, добавить нужный вам контент, подключить стили, привязать всё это дело к активирующей кнопке или любому другому элементу сайта(картинки, пункты меню, ссылки, отдельное слово в тексте и т.д.) и всё, модальное окно готово к работе. 
2. Модальное окно с помощью CSS и jQuery
Очень простой, лёгкий плагин jQuery, с помощью которого вы сможете быстро и без проблем реализовать у себя на сайте вывод модальных модальных окон с любой информацией, будь то простой текст, картинки, различный формы или встроенное видео.Внешний вид формируется с помощью CSS, размер окна задается непосредственно в ссылке, в атрибуте href="#?w=500", где #?w=500 указывает необходимую ширину окна. Впрочем, изучив детали урока, всё станет предельно ясно. Для работы данного решения необходима подключённая к сайту библиотека jQuery. 
3. Адаптивное модальное окно строго по центру
Изначально урок задумывался именно об абсолютной центрации блочных элементов с содержанием, но об этом столько написано, что решил разбавить тему адаптивностью и наложить всё это на модальное окно, при этом пользуясь исключительно средствами CSS. Что из этого получилось, можете узнать изучив урок. 
4. Модальное окно на HTML5, CSS3 и скрытых чекбоксах
Довольно свежая метода для реализации всплывающих(модальных) окошек. Скрытые чекбоксы я чаще использовал для создания раскрывающихся информационных блоков или «аккордеонов». В результате оказалось всё очень даже просто, с помощью CSS3 и синтаксических особенностей HTML5 можно легко организовать работу модальных окон. На оформлении особо не зацикливался(вся суть не в этом), за исходную взял пример инфо-блоков Bootstrap. Способ отлично срабатывает во всех современных браузерах, пользователи застрявшие на замшелых версиях IE-шки, к сожалению пролетают мимо. 
5. Модальный блок видео на CSS3
Не даёт мне покоя тема организации просмотра видео в модальном блоке, исключительно средствами CSS3, без javascrip. Нет с выводом видео в модальном окне всё в порядке, не могу найти адекватного и всех устраивающего решения остановки видео при закрытии окна. Тупо использовал ссылку с пустым атрибутом href="", многих распальцованных мастеровых от этого не совсем кошерного способа переворачивает во сне, но другого более действенного и валидного решения, на данный момент пока не нашёл. 
6. Ротатор контента в модальном окне
Меня часто спрашивали, можно ли встроить внутрь модального окна, какой-нибудь слайдер, не только для картинок, но и для текста. Почему бы и нет. У буржуинов нашелся простенький, подходящий по всем параметрам ротатор контента, оставалось объединить его с уже готовым модальным окном. И в итоге получилось то, что получилось:)). Посмотрите, всё довольно просто в исполнении. 
7. Интеграция контактной формы в модальное окно
На многих сайтах используются всплывающие формы обратной связи, формы регистрации и входа. Проще всего встроить рабочую форму в готовое модальное окно. Берётся вполне себе приличная форма, свёрстанная на CSS3, любой вариант модального окна представленный выше, остаётся лишь оба эти элемента объединить в единый механизм. Как это сделать? Именно об этом, подробно расписано в представленном уроке. 
8. Модальная форма контактов на CSS3
Отличная возможность для ваших пользователей отправлять сообщения с любой страницы, или отдельной записи сайта (блога) — это отдельная, модальная форма контактов. Правильно прикручиваете к форме php-обработчик, размещаете в тело нужной вам страницы и всё, остаётся только периодически проверять свой почтовый ящик. Данный метод корректно работает во всех современных браузерах: Chrome, Firefox, Opera, Safari, так же в Internet Explorer, начиная с 9-й версии. Сама форма наделена функциями модального окна с помощью магии CSS3. 
9. Lightbox Эффект на CSS3
Лайтбокс своего рода то же модальное окно, вернее принцип работы практически тот же, правда используется по большей части для просмотра увеличенных или полно-размерных изображений. В своё время решил заделать более-менее адаптивную версию Lightbox, исключительно средствами CSS3. Что из этого получилось сможете узнать посмотрев пример и если тема вставит, изучите и урок. Пользователи плотно подсевшие на IE 8 и ниже, к сожалению ничего не увидят, метод основан на использовании псевдокласса :target. 
10. Всплывающая контактная форма для сайта
Интересное (на мой взгляд) решение создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта. Работа формы основана на обработке события onclick. Оформление с помощью оригинального изображения в виде почтового конверта. Работает форма быстро и корректно во всех браузерах, так что вполне достойный образец средств взаимодействия с пользователями. 
11. Всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript
Меня, как и многих других вымораживают различные всплывающие окна при начальной загрузке сайта. Считаю такой метод черезчур навязчивым. Но фишка востребована и широко использована, а значит посмотреть как всё это дело работает, наверное всё же стоит. Все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. В представленном уроке, подробно расписываю, как эту блокировку можно обойти, так же узнаете, как правильно использовать cookie, чтобы окно являлось взору пользователя один раз при первом заходе на сайт, или же с определённым интервалом. 
На этом пожалуй и всё. Конечно в загашнике найдётся ещё пара-тройка рабочих вариантов создания модальных окон, а в интернетах то их сколько, главное найти то что нужно. Надеюсь эта подборка поможет сориентироваться по теме в ворохе статей моего блога. По мере удачных раскопок и нахождению затерявшегося материала, обзор будет обновляться.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
10 модальных окон на jQuery для адаптивного сайта
Cегодня мы рассмотрим 10 адаптивных lightbox библиотек jQuery. Lightbox — это популярный способ показа изображений в модальном окне и его можно встретить во многих галереях на сайтах. Также модальные окна используются для показа диалога, видео и предупреждений об ошибках да и любую другую информацию, которую необходимо выделить. На «Постовом» мы используем модальное окно с предложением подписаться на нашу группу вконтакте, что бы следить за обновлениями. Оно появляется единожды, когда вы уводите мышку с сайта и при закрытие больше появляться не будет, что бы не надоедать посетителям. В этом топике собраны адаптивные решения jQuery для модальных окон. Пишите комментарии и подписывайтесь на нашу группу и рассылку.
PhotoSwipe
Lightbox JavaScript. Можно настроить чтобы отображалась панель управления при открытии изображения. В этом режиме будет отображаться описание, и кнопки «во весь экран» и «поделиться». Поддерживает тачскрин.
Magnific Popup
Скрипт jQuery, который позволяет создать модальное окно для отдельного фото с различными свойствами или lightbox галереи, а также всплывающие окна с текстом, видео, Google maps и формой отправки.
Image Lightbox
Lightbox JQuery для галереи изображений. Адаптивный и легкий. Не содержит кнопок навигации, но поддерживает возможность нажатия/перетаскивания (как на сенсорных экранах) и навигацию с помощью стрелок на клавиатуре. Использует CSS свойства transform и transition.
Mini Lightbox
Lightbox в стиле минимализм. Увеличенное изображения появляется в модальном окне. Также можно использовать img атрибут data-image-opene, чтобы подключить большое изображение, которое будет открываться в лайтбоксе вместо миниатюры.
Lightcase
Небольшой гибкий лайтбокс jQuery для презентации разичных медиа форматов на сайте.
Yalb (Vanilla)
Yalb (Yet Another LightBox) использует чистый JavaScript. Анимация осуществляется с помощью CSS свойств transition и animation. Обратите внимание, что он может использоваться только в современных браузерах и не поддерживает IE9.
iLightBox
Плагин lightbox jQuery для HTML и Wordpress. Показывает галерею в сплывающеи окне с миниатюрами вертикальным списком, прокрутка «вниз-вверх», добавлены кнопки «поделиться с...», поддержка нажатий, как в сенсорных устройствах и еще большое количество особенностей.
Featherlight
Очень легкий плагин lightbox jQuery размером до 6 Кб. В наличии стандартное модальное окно, настраиваемое (цвет фона и текста), всплывающее окно Ajax и iFrame.
jQuery lightGallery
Легкий jQuery lightbox для презентации фото и видео галереи. Особенности: поддерживает тачскрин, Youtube Vimeo Video и html5 видео, iframe, навигацию с помощью клавиатуры, слайд-эффекты и др.
Swipebox
Адаптивный jQuery плагин. Поддерживается почти всеми устройствами и браузерами. Включает навигацию с помощью клавиатуры, Легко настраивается с помощью CSS.
postovoy.net
17 всплывающих и модальных окон jquery CSS для сайта
1. Модальное окно на jQuery «Simple Modal Box»
2. jQuery плагин «LeanModal»
Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.
3. jQuery плагин «ToastMessage»
Всплывающие сообщения. Плагин в двух вариантах. В одном случае сообщения исчезают самостоятельно, по прошествии определённого времени, во второй реализации для того чтобы закрыть сообщение необходимо нажать на кнопку.
4. Содержимое, всплывающее в модальном окне
Плагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.
5. Симпатичные диалоговые окна
Нажмите на крестик на демонстрационной странице, чтобы посмотреть плагин в действии.
6. Mootools модальное окно, плагин «MooDialog»
7. jQuery всплывающая панель сверху экрана
8. jQuery всплывающее окно
9. Форма обратной связи в модальном окне
jQuery плагин для отображения формы обратной связи во всплывающем окне.
10. MooTools плагин «LightFace» для реализации диалоговых окон Facebook
Диалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.
11. jQuery модальное окно
Аккуратное всплывающее диалоговое окно на jQuery.
12. Модальные окна jQuery
Симпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.
13. Модальные окна jQuery
Всплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.
14. Диалоговые окна с помощью jQuery и CSS3
15. Всплывающее поверх страницы сообщение
Сообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.
16. Модальное окно «ModalBox» на javascript
Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.
17. «Leightbox» плагин с использованием библиотеки Prototype
Плагин для отображения контента в модальных окнах.
freeweber.ru
Модальное окно на jQuery с формой отправки письма | XoZblog
Здравствуйте, уважаемые читатели XoZbloga! Однажды я уже писал о модальных окнах, то была статья о создании окон для WordPress с помощью плагина Easy Modal Lite. В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!
Что нам понадобится?! не так уж и много:
- библиотека jQuery;
- плагин fancybox;
- сценарий PHP для отправки сообщения.
Разметка
Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox, очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.
Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:
1 | <a href="#inline">Отправить сообщение</a> |
Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:
12345678910111213 | div> h3>Отправка сообщения/h3> <form name="contact" action="#" method="post"> <label for="email">Ваш E-mail</label> <input type="email" name="email"> <br> <label for="msg">Введите сообщение</label> <textarea name="msg"></textarea> <button>Отправить E-mail</button> </form></div> |
Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.
Изначально форма скрыта:
1 | #inline { display: none; } |
Стили формы
Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546 | .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;} |
Для оформления кнопки «Отправить» будем использовать линейный градиент.:
123456789101112131415161718192021222324252627282930313233343536373839 | #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 в качестве селектора выступает класс ссылки:
123 | $(document).ready(function() { $(".modalbox").fancybox(); $("#contact").submit(function() { return false; }); |
Также отменяем стандартное действие формы 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 методы, ссылка в начале статьи.
Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:
1234 | $(".modalbox").fancybox({ padding : 0, height : 100}); |
Отправка сообщения
Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:
1234 | function validateEmail(email) { var reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); } |
Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:
12345678910111213141516171819 | $("#send").on("click", function(){ var emailval = $("#email").val(); var msgval = $("#msg").val(); var msglen = msgval.length; var mailvalid = validateEmail(emailval);// Проверка правильности электронного адреса if(mailvalid == false) { $("#email").addClass("error"); } else if(mailvalid == true){ $("#email").removeClass("error"); }// Проверка длины сообщения if(msglen < 4) { $("#msg").addClass("error"); } else if(msglen >= 4){ $("#msg").removeClass("error"); } |
Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen) и проводим проверку введенного электронного адреса (mailvalid). Далее проверяем если в переменная mailvalid равна false, значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным).
Теперь о второй части этого обработчика события OnClick нам нужно отправить данные формы в PHP.
1234567891011121314151617181920 | if(mailvalid == true && msglen >= 4) { // если обе проверки пройдены // сначала мы скрываем кнопку отправки $("#send").replaceWith("<em>отправка...</em>"); $.ajax({ type: 'POST', url: 'sendmessage.php', data: $("#contact").serialize(), success: function(data) { if(data == "true") { $("#contact").fadeOut("fast", function(){ $(this).before("<strong>Успешно! Ваше сообщение отправлено :)</strong>"); setTimeout("$.fancybox.close()", 1000); }); } } }); }}); |
Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.
Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.
Если мы получим хороший отклик от сервера (эти данные мы формируем в пхп файле), то мы скроем контактную форму и покажем сообщение об успехе отправки. Я использую SetTimeout(), для того чтобы модальное окно закрылось не сразу а через секунду после отправки данных.
PHP сценарий
Мы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php. В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false.
В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.
123456789101112131415161718192021222324 | $sendto = "[email protected]";$usermail = $_POST['email'];$content = nl2br($_POST['msg']); // Формирование заголовка письма$subject = "Новое сообщение";$headers = "From: " . strip_tags($usermail) . "\r\n";$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";$headers .= "MIME-Version: 1.0\r\n";$headers .= "Content-Type: text/html;charset=utf-8 \r\n"; // Формирование тела письма$msg = "<html><body>";$msg .= "<h3>Новое сообщение</h3>\r\n";$msg .= "<p><strong>От кого:</strong> ".$usermail."</p>\r\n";$msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";$msg .= "</body></html>"; // отправка сообщенияif(@mail($sendto, $subject, $msg, $headers)) { echo "true";} else { echo "false";} |
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!
xozblog.ru
|
|
..:::Счетчики:::.. |
|
|
|
|
|
|
|
|