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