Почему опять модальное окно? Просто возникла неприятная ситуация. Клиент заказал кнопку заказа обратного звонка в плавающем меню лэндинга. А так как скрипт лэндинга уже был готов и утвержден клиентом, то пришлось интегрировать модуль в сайт. И тут, бац! ни один из модулей на 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>
Все.
Комментариев нет:
Отправить комментарий