13 июн. 2015 г.

Скрипт модального окна с заказом обратного звонока

Почему опять модальное окно? Просто возникла неприятная ситуация. Клиент заказал кнопку заказа обратного звонка в плавающем меню лэндинга. А так как скрипт лэндинга уже был готов и утвержден клиентом, то пришлось интегрировать модуль в сайт. И тут, бац! ни один из модулей на jQuery не хотел работать. То ли конфликт java, то ли еще что-то, но не поперло.
И вот нашел на сайте "Шпаргалка блоггера" скрипт, который очень хорошо интегрировался в html-страницу.
Окно конечно не очень симпатичное, но вполне даже ничего. А при небольшом изменении скрипта получилось очень неплохо. Замечу, что цвета заданы в RGB, но при наличии Photoshop или другого редактора можно внести корректировку цветов окна и тени.
И так.

На HTML страницу добавляем

<style>
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99; /*Окно должно быть выше всех слоев*/
  color: rgba(0,0,0,0);
  background: rgba(180,180,180,.9);/*Цвет тени*/
  opacity: 0.5;/*Можно добавить прозрачность тени. Чем больше значение, 
тем прозрачней*/
  cursor: pointer;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
  position: absolute;
  top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
 /*Теперь зададим цвета градиента окна*/ 
background: rgb(150,150,150) linear-gradient(rgb(100,100,100),
 rgb(170,170,170));
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 70%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 90%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
</style>

<input type="checkbox" id="mail"/>
<label for="mail">заказать звонок</label> <!-- Собственно ссылка.  -->
<!-- Если в label добавить атрибут class, то может получиться 
кнопка нужного вида --> 
<!-- Модуль самого окна --> 
<div id="popup">
<form method="post" action="mail.php">
<label for="mail" title="Отменить">✕</label>
<div data-title="Например, Мария Петровна">Ваше имя: 
<input type='text' name='name' required /></div>
<div data-title="Например, 89270000000">Моб. телефон: 
<input type="tel" name='tel' required maxlength="11" value='8' 
pattern="8\d{10}"/></div>
<input type='submit' value='Заказать'/>
</form>
</div>
<!-- Конец модуля окна --> 

Ну вот и все. Теперь, собственно, надо создать php-файл для отправки сообщения.

Создаём файл mail.php:

<?
if($_POST['name']){ // заносим в массив значение полей, их может быть больше
  $znach = array(
   1 => $_POST['name'], 
   2 => $_POST['tel'],
  );
  mail("name@yandex.ru", "заказ звонка ".$_SERVER['HTTP_REFERER'], $znach[2]." ".$znach[1]); // укажите здесь свой email
}
Header("Refresh: 8; URL=".$_SERVER['HTTP_REFERER']); // спустя 8 секунд человек будет возвращён на предыдущий URL
?>
// Формируем внешний вид окна сообщения и страницы перенаправления
<!DOCTYPE html>
<title><? print "$znach[1], данные успешно отправлены!"; ?></title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta name="robots" content="noindex"/>
<style>
body {background: rgba(180,180,180,.9);}
body > div {
   position: absolute;
   top: 50%; left: 50%;
  -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  padding: .5% 1% 1%;
  border: 1px solid rgb(100,100,100);
  font-size: 140%;
  font-weight: 600;
  text-align: right;
  text-shadow: -1px -1px #666;
  color: rgb(240,240,240);
  background: rgb(150,150,150) linear-gradient(rgb(100,100,100), rgb(170,170,170));
}
label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
body > div > div {padding-top: 3%;}
</style>

 <div>
 <label title="Продолжить">✕</label>
<div><? print "$znach[1]"; ?>, Ваша заявка получена!<br>
Мы позвоним Вам в течении часа.</div>
</div>

<script> // нажав на label посетитель вернётся на предыдущую страницу, где заполнял форму
document.getElementsByTagName('label')[0].onclick = function() { window.location.href="<? print $_SERVER['HTTP_REFERER']; ?>"
}
</script>

Все.