Обратный звонок - модальное окно

  1. Главная
  2. Блог
  3. Разработка
  4. Обратный звонок - модальное окно

В этой статье мы рассмотрим, как создать удобное модальное окно для пользователей, которым нужно заказать обратный звонок.

модальное окно

Обратный звонок улучшает юзабилити коммерческого сайта, так как пользователю легче оставить свой номер телефона, чем звонить самому. Кроме того, гораздо приятнее связаться с интернет-магазином за его счет, чем тратить свои средства на связь. Такой дополнительный сервис стимулирует посетителей стать клиентами, то есть увеличивает конверсию.

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. Скачать эти скрипты можно здесь.

Итог

Готовое решение, которое бы сочетало в себе хорошее модальное окно с функцией обратного звонка найти не просто. В этой статье мы объединили их в одно целое и создали свой эффективный вариант.

Понравилось? Репост!
Светлана
Неплохая идея, непривычная. Обычно на сайтах присутствуют исключительно варианты звонка оператору, но что бы оператор звонил клиенту!!! Интересно! Реализовывал уже кто-нибудь?
Ваня
Форму заказа звонка стоить просто добавить или поставить вместо номера телефона магазина?
Namik
Интересно было бы развивать эту тему. Кроме формы заказа звонка так же интересует момент общения с клиентом. Использовать ли готовый спич, нанимать ли оператора или делать все самому. Я понимаю, что это уже немного не та тема, но интересно как это происходит в крупных интернет-магазинах.
Гена
А есть ли какое нибудь готовое решение для WordPress? Возможно плагин уже есть, это был бы достаточно простой и экономный вариант)
Гена
Спасибо за наводку! Да, наверное это самый правильный подход, но я обычно беру готовый вариант и переделываю под себя) Хотя наверное для бизнеса лучше все же свое решение.
Александр
Странно но форма не заработала… в плане стилей и всего такого.. на отправку даже не проверял. а так да, смотрится хорошо. жаль что не получилось её заставить работать..
Яков
У меня что-то пока не очень получается добавить его себе. Выглядит отлично и удобный вроде, буду пытаться дальше.