Flat Modal Window

Форма обратной связи в модальном окне на PHP и Ajax

Сегодня я вам покажу как сделать форму обратной связи в модальном окне. Модальное окно будет написано на jQuery. Мы соберем код из ранее выпущенных записей и создадим новую форму обратной связи.

HTML

         
Открыть форму 
  
 
 
 
ОСТАВЬТЕ СВОИ ДАННЫЕ И МЫ С ВАМИ СВЯЖЕМСЯ
 
и мы удешевим решение вашей задачи без потери качества
 
      

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); html, body < width: 100%; height: 100%; margin: 0; >.page-wrapper < width: 100%; height: 100%; background-size: cover; >a.btn < width: 200px; padding: 18px 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700; text-align: center; text-decoration: none; text-transform: uppercase; color: #fff; border-radius: 0; background: #e2525c; >.modal-wrapper < width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden; opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background: rgba(0, 0, 0, 0.5); >.modal-wrapper.open < opacity: 1; visibility: visible; >.modal < width: 500px; display: block; margin: 30% 0 0 -250px; position: relative; top: 50%; left: 50%; opacity: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #fafafa; >.modal-wrapper.open .modal < margin-top: -200px; opacity: 1; >.head < width: 100%; height: 100%; margin: 0 0 14px; padding: 5px 30px; overflow: hidden; position: absolute; >.btn-close < font-size: 28px; display: block; float: right; color: #fff; >.modal .content < padding: 0 0 20px 0; >.good-job < text-align: center; font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #e2525c; >.good-job .fa-thumbs-o-up < font-size: 60px; >.good-job h1 < font-size: 45px; >.form_modal_window < max-width: 70%; display: flex; flex-direction: column; margin: auto; >.modal .content .text < background: url("../Bright-Purple-Wallpaper-59-images.jpg"); color: #fff; padding: 10px; margin: 20px 0; >.modal .content .text h2 < margin:0; font-size: 35px; >.modal .content .text p < margin:0; font-size: 14px; >.modal-wrapper < margin: 0 0 20px 0; >.modal .content form input < color: #000; padding: 15px; border: none; margin-bottom: 15px; box-shadow: 0px 1px 3px 1px #e9e9e9; font-size: 15px; >.modal .content form input[type=submit]

Скрипт для модального окна

$( document ).ready(function() < $('.trigger').on('click', function() < $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur-it'); return false; >); $('.head').on('click', function ()< $('.modal-wrapper').removeClass('open'); >) >);

PHP

 else< /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/ $to = "your_mail@mail.ru"; /* Адрес, куда отправляем письма*/ $subject = "Письмо с обратной связи"; /*Тема письма*/ $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers . ;/*ОТ КОГО*/ /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */ $message .= "Имя пользователя: ".$name."\n"; $message .= "Почта: ".$email."\n"; $message .= "Телефон: ".$tel."\n"; /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/ //print_r($message); $send = mail($to, $subject, $message, $headers); /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/ if ($send == "true") < echo "
Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n
"; > /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/ else < echo "
Не удалось отправить, попробуйте снова!
"; > > ?>

На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет возможности их использовать, рассмотрим примеры статического окна и всплывающего по клику.

Затемнение фона

Для затемнения сайта достаточно добавить в верстку и CSS стили к нему:

Стили задаются псевдоклассом :before для того чтобы opacity не влиял на контент, который будет в этом блоке. Полупрозрачный фон будет растянут на все окно браузера.

Верстка модального окна

Добавим в div.popup-fade блок с контентом, ссылку «закрыть» и стили для них.

Закрыть 
Всплывающие окна имеют широкий диапазон применений.
 
 

$(document).ready(function($) < // Клик по ссылке "Закрыть". $('.popup-close').click(function() < $(this).parents('.popup-fade').fadeOut(); return false; >); // Закрытие по клавише Esc. $(document).keydown(function(e) < if (e.keyCode === 27) < e.stopPropagation(); $('.popup-fade').fadeOut(); >>); // Клик по фону, но не по окну. $('.popup-fade').click(function(e) < if ($(e.target).closest('.popup').length == 0) < $(this).fadeOut(); >>); >);

Открыть popup 
Закрыть 
Всплывающие окна имеют широкий диапазон применений.