В этой статье мы рассмотрим, как создать удобное модальное окно для пользователей, которым нужно заказать обратный звонок.
Обратный звонок улучшает юзабилити коммерческого сайта, так как пользователю легче оставить свой номер телефона, чем звонить самому. Кроме того, гораздо приятнее связаться с интернет-магазином за его счет, чем тратить свои средства на связь. Такой дополнительный сервис стимулирует посетителей стать клиентами, то есть увеличивает конверсию.
HTML и CSS реализация обратного звонка на сайте
Как реализовать обратный звонок на сайте средствами HTML и CSS? Для этого нужно создать соответствующую форму. Давайте рассмотрим следующий пример такого решения.
HTML:
<div class="InputBlock">
<input type="text" name="telefont" class="tele" placeholder="телефон">
</div>
<div class="InputBlock">
<textarea name="message" class="message" placeholder="удобное время для звонка"></textarea>
</div>
<input type="submit" class="submit" name="submit" value="заказать">
В этой форме располагаются поля для ввода телефона, имени пользователя и кнопка «Заказать».
CSS:
Файл css, можно посмотреть здесь:
/* General styles for the modal */
/*
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
height: 100%;
min-width: 1000px;
overflow: hidden;
}
.md-perspective body {
background: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}
div.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
div.md-content {
padding: 20px 20px;
}
div.headermd-modal span.h2{
font-size: 25px;
font-weight: 300;
color: #4b5158;
}
div.headermd-modal div.model{
float:left;
}
div.content_tabs ul li p{
font-size: 14px;
margin-bottom: 0px;
}
div.content_tabs ul li p a{
display: block;
}
div.md-modal#feedback {
max-width: 363px;
min-width: 320px;
height: 318px;
}
div.md-show {
visibility: visible;
}
div.md-modal#feedback{
line-height: normal;
}
div.md-modal#feedback span.h2 {
font-size: 30px;
color: #2d2e2e;
display: block;
text-align: center;
margin-bottom: 20px;
}
div.md-modal#feedback div.md-content{
padding: 23px 20px;
}
div.md-overlay {
position: fixed;
width: 100%;
height: 100%;
min-width: 1000px;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(48,48,48,0.8);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show ~ div.md-overlay {
opacity: 1;
visibility: visible;
}
/* Content styles */
div.md-content {
background: #fff;
position: relative;
margin: 0 auto;
}
div.md-close{
background: #e74c3c url("/wp-content/themes/vash-sayt/img/close.png")no-repeat;
background-position: 50% 50%;
width: 35px;
height: 35px;
cursor: pointer;
position: absolute;
right: -36px;
top:0px;
}
div.md-content input[type=submit].submit {
cursor: pointer;
border: none;
color: #fff;
font-size: 14px;
display: block;
text-transform: uppercase;
width: 170px;
height: 55px;
font-family: Tahoma, Geneva, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgb(219,70,70);
background: -moz-linear-gradient(top, rgba(219,70,70,1) 0%, rgba(189,35,35,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,70,70,1)), color-stop(100%,rgba(189,35,35,1)));
background: -webkit-linear-gradient(top, rgba(219,70,70,1) 0%,rgba(189,35,35,1) 100%);
background: -o-linear-gradient(top, rgba(219,70,70,1) 0%,rgba(189,35,35,1) 100%);
background: -ms-linear-gradient(top, rgba(219,70,70,1) 0%,rgba(189,35,35,1) 100%);
background: linear-gradient(to bottom, rgba(219,70,70,1) 0%,rgba(189,35,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db4646', endColorstr='#bd2323',GradientType=0 );
}
div.md-content input[type=submit].submit:hover {
background: rgb(189, 35, 35);
background: -moz-linear-gradient(top, rgba(189, 35, 35, 1) 0%, rgba(189, 35, 35, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189, 35, 35, 1)), color-stop(100%, rgba(189, 35, 35, 1)));
background: -webkit-linear-gradient(top, rgba(189, 35, 35, 1) 0%, rgba(189, 35, 35, 1) 100%);
background: -o-linear-gradient(top, rgba(189, 35, 35, 1) 0%, rgba(189, 35, 35, 1) 100%);
background: -ms-linear-gradient(top, rgba(189, 35, 35, 1) 0%, rgba(189, 35, 35, 1) 100%);
background: linear-gradient(to bottom, rgba(189, 35, 35, 1) 0%, rgba(189, 35, 35, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd2323', endColorstr='#bd2323', GradientType=0);
}
div.md-modal#feedback div.md-content div.BlockForm{
margin-top: 0px;
width: 100%;
}
div.md-modal#feedback div.md-content div.BlockForm input[type=text],div.md-modal#feedback div.md-content div.BlockForm textarea.message{
padding: 5px 5px;
font-family: Tahoma, Geneva, sans-serif;
}
div.md-modal#feedback div.md-content div.BlockForm input[type=text] {
width: 258px;
height: 27px;
border: 1px solid #ccc;;
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.md-modal#feedback div.md-content div.BlockForm textarea.message{
width: 258px;
height: 77px;
border: 1px solid #ccc;
display: block;
resize: none;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.md-content div.BlockForm div.InputBlock{
margin-bottom: 20px;
}
/* Effect 1: Fade in and scale up */
div.md-effect-1 div.md-content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-1 div.md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Effect 2: Slide from the right */
div.md-effect-2 div.md-content {
-webkit-transform: translateX(20%);
-moz-transform: translateX(20%);
-ms-transform: translateX(20%);
transform: translateX(20%);
opacity: 0;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
div.md-show.md-effect-2 div.md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
/* Effect 3: Slide from the bottom */
div.md-effect-3 div.md-content {
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-3 div.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
/* Effect 4: Newspaper */
div.md-effect-4 div.md-content {
-webkit-transform: scale(0) rotate(720deg);
-moz-transform: scale(0) rotate(720deg);
-ms-transform: scale(0) rotate(720deg);
transform: scale(0) rotate(720deg);
opacity: 0;
}
div.md-show.md-effect-4 ~ div.md-overlay,
div.md-effect-4 div.md-content {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
div.md-show.md-effect-4 div.md-content {
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
opacity: 1;
}
/* Effect 5: fall */
div.md-effect-5.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-5 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(600px) rotateX(20deg);
-moz-transform: translateZ(600px) rotateX(20deg);
-ms-transform: translateZ(600px) rotateX(20deg);
transform: translateZ(600px) rotateX(20deg);
opacity: 0;
}
div.md-show.md-effect-5 div.md-content {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
-ms-transform: translateZ(0px) rotateX(0deg);
transform: translateZ(0px) rotateX(0deg);
opacity: 1;
}
/* Effect 6: side fall */
div.md-effect-6.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-6 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
transform: translate(30%) translateZ(600px) rotate(10deg);
opacity: 0;
}
div.md-show.md-effect-6 div.md-content {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
-moz-transform: translate(0%) translateZ(0) rotate(0deg);
-ms-transform: translate(0%) translateZ(0) rotate(0deg);
transform: translate(0%) translateZ(0) rotate(0deg);
opacity: 1;
}
/* Effect 7: slide and stick to top */
div.md-effect-7{
top: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
div.md-effect-7 div.md-content {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
opacity: 0;
}
div.md-show.md-effect-7 div.md-content {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
border-radius: 0 0 3px 3px;
opacity: 1;
}
/* Effect 8: 3D flip horizontal */
div.md-effect-8.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-8 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-70deg);
-moz-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
div.md-show.md-effect-8 div.md-content {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
/* Effect 9: 3D flip vertical */
div.md-effect-9.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-9 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-70deg);
-moz-transform: rotateX(-70deg);
-ms-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
div.md-show.md-effect-9 div.md-content {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
/* Effect 10: 3D sign */
div.md-effect-10.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-10 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-60deg);
-moz-transform: rotateX(-60deg);
-ms-transform: rotateX(-60deg);
transform: rotateX(-60deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-10 div.md-content {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 1;
}
/* Effect 11: Super scaled */
div.md-effect-11 div.md-content {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-11 div.md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Effect 12: Just me */
div.md-effect-12 div.md-content {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-12 ~ div.md-overlay {
background: #e74c3c;
}
div.md-effect-12,
div.md-effect-12 div.md-content {
background: transparent;
}
div.md-show.md-effect-12 div.md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Effect 13: 3D slit */
div.md-effect-13.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-13 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-3000px) rotateY(90deg);
-moz-transform: translateZ(-3000px) rotateY(90deg);
-ms-transform: translateZ(-3000px) rotateY(90deg);
transform: translateZ(-3000px) rotateY(90deg);
opacity: 0;
}
div.md-show.md-effect-13 div.md-content {
-webkit-animation: slit .7s forwards ease-out;
-moz-animation: slit .7s forwards ease-out;
animation: slit .7s forwards ease-out;
}
@-webkit-keyframes slit {
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@-moz-keyframes slit {
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@keyframes slit {
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
/* Effect 14: 3D Rotate from bottom */
div.md-effect-14.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-14 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(100%) rotateX(90deg);
-moz-transform: translateY(100%) rotateX(90deg);
-ms-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.md-show.md-effect-14 div.md-content {
-webkit-transform: translateY(0%) rotateX(0deg);
-moz-transform: translateY(0%) rotateX(0deg);
-ms-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);
opacity: 1;
}
/* Effect 15: 3D Rotate in from left */
div.md-effect-15.md-modal {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
}
div.md-effect-15 div.md-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
transform: translateZ(100px) translateX(-30%) rotateY(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-15 div.md-content {
-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
transform: translateZ(0px) translateX(0%) rotateY(0deg);
opacity: 1;
}
/* Effect 16: Blur */
div.md-show.md-effect-16 ~ div.md-overlay {
background: rgba(48,48,48,0.8);
}
div.md-show.md-effect-16 ~ .container {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}
div.md-effect-16 div.md-content {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
-ms-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 0;
}
div.md-show.md-effect-16 ~ .container,
div.md-effect-16 div.md-content {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
div.md-show.md-effect-16 div.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
/* Effect 17: Slide in from bottom with perspective on container */
div.md-show.md-effect-17 ~ .container {
height: 100%;
overflow: hidden;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
div.md-show.md-effect-17 ~ .container,
div.md-show.md-effect-17 ~ div.md-overlay {
-webkit-transform: rotateX(-2deg);
-moz-transform: rotateX(-2deg);
-ms-transform: rotateX(-2deg);
transform: rotateX(-2deg);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.md-effect-17 div.md-content {
opacity: 0;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
}
div.md-show.md-effect-17 div.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 0.3s 0.2s;
-moz-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}
/* Effect 18: Slide from right with perspective on container */
div.md-show.md-effect-18 ~ .container {
height: 100%;
overflow: hidden;
}
div.md-show.md-effect-18 ~ div.md-overlay {
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
div.md-show.md-effect-18 ~ .container,
div.md-show.md-effect-18 ~ div.md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 0% 50%;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@-webkit-keyframes rotateRightSideFirst {
50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: translateZ(-200px); }
}
@-moz-keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); }
}
@keyframes rotateRightSideFirst {
50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
100% { transform: translateZ(-200px); }
}
div.md-effect-18 div.md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
opacity: 0;
}
div.md-show.md-effect-18 div.md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}
/* Effect 19: Slip in from the top with perspective on container */
div.md-show.md-effect-19 ~ .container {
height: 100%;
overflow: hidden;
}
div.md-show.md-effect-19 ~ div.md-overlay {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
div.md-show.md-effect-19 ~ .container,
div.md-show.md-effect-19 ~ div.md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 100%;
-webkit-animation: OpenTop 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 50% 100%;
-moz-animation: OpenTop 0.5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 50% 100%;
animation: OpenTop 0.5s forwards ease-in;
}
@-webkit-keyframes OpenTop {
50% {
-webkit-transform: rotateX(10deg);
-webkit-animation-timing-function: ease-out;
}
}
@-moz-keyframes OpenTop {
50% {
-moz-transform: rotateX(10deg);
-moz-animation-timing-function: ease-out;
}
}
@keyframes OpenTop {
50% {
transform: rotateX(10deg);
animation-timing-function: ease-out;
}
}
div.md-effect-19 div.md-content {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
opacity: 0;
}
div.md-show.md-effect-19 div.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}Подключение PHP
\r\n";;
$headers .= "bcc: \r\n";;
$message = "
<table><tbody><tr><td>Телефон</td><td>".convert($_REQUEST["telefont"])."</td></tr><tr><td>Удобное время для звонка</td><td>".convert($_REQUEST["message"])."</td></tr></tbody></table>
";
// отправляем email письмо
$esend = mail($mailTo, $subject, $message, $headers);
}
if ($esend) echo 'ok';
else echo 'error';
?>Полученные данные можно обработать средствами PHP: проверить номер телефона на валидность, а в случае ошибки – отправить пользователю сообщение на E-mail для уточнения данных и удобного времени звонка.
JavaScript
Список файлов, которые нам понадобятся для реализации функционала модального окна:
- jquery.maskedinput.js
- modernizr.custom.js
- classie.js
- modalEffects.js
- cssParser.js
Для подключения скриптов следует пройти следующие шаги, редактируя код последовательно, от хедера к футеру.
Header
В секции header нужно подключить скрипты jquery.maskedinput.js, modernizr.custom.js и не забываем про jquery.min.js. Последний файл представляет собой библиотеку jQuery, без которой другие скрипты не смогут работать, скрипт можно подключить прямо из JavaScript библиотеки Яндекса:
Обратите внимание, что маска телефона задается с помощью скрипта jquery.maskedinput.js.
Footer
В футере сайта мы подключаем скрипты classie.js, modalEffects.js и cssParser.js. Скачать эти скрипты можно здесь.
Итог
Готовое решение, которое бы сочетало в себе хорошее модальное окно с функцией обратного звонка найти не просто. В этой статье мы объединили их в одно целое и создали свой эффективный вариант.