Всплывающее окно обратного звонка на html + css, без jQuery и Mootools

Обратный звонок для сайта

Зачастую бывает, что нет возможности использовать библиотеки jQuery или Mootools из за их несовместимости. При этом хочется, чтобы на сайте была всплывающая форма обратного звонка. Это вполне выполнимо по средствам html + php + css.

Данный пример хорош тем что он абсолютно не привязан ни к какому движку, принцип работы действует на базовых компонентах. При необходимости скрипт обратного звонка можно дополнить дополнительными полями. Вид окна и формы также легко настраивается в файле CSS.

Исходный код обратного звонка

Код кнопки

<a href="#modal" class="button openModal">Заказать обратный звонок</a>

Код Исходный код формы заказа обратного звонка

<div id="modal" class="modal">
    <div>
       <div class="text" align="center">
       <div id="blok_tel">
  <form action="" method="post" class="form1">
ЗАКАЗ ОБРАТНОГО ЗВОНКА
<input type="text" name="tel" class="inputbox" value="Номер телефона с кодом"
       onfocus="(this.value == '0123456789') && (this.value = '')"
       onblur="(this.value == '') && (this.value = '0123456789')">
<input type="submit" class="button" name="submit_tel">
  </form>
<?if(isset($_POST["submit_tel"])) 
{
$email = 'ваша_почта@yandex.com';
/* Отправляем email */
mail($email, "Заказ обратного звонка на сайте ...", "\n
Посетитель заказал обратный звонок! \n
Телефон : ".$_POST['tel']."
");
echo 'Заявка принята!';
}
?>
</div>


</div>
        <a href="#close" title="Закрыть">Закрыть</a>
    </div>        
</div>

CSS таблица стилей для всплывающего окна

/* Контейнер */
.modal {

/* Слой перекрытия */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Трансформации прозрачности при открытии  */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Скрываем изначально */
opacity: 0;
pointer-events: none;
}

/* Показываем модальное окно */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* Содержание */
.modal > div {
width: 300px;
background: #ffffff;
position: relative;
margin: 10% auto;

/* По умолчанию минимизируем анимацию */
-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */
padding: 30px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
text-shadow: 0 1px 0 #fff;
}

/* Изменяем анимацию при открытии модального окна*/
.modal:target > div {
-webkit-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
   -webkit-transform: scale3d(0.1,0.1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
   -webkit-transform: scale3d(1.08,1.08,1);
   -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
   -webkit-transform: scale3d(0.95,0.95,1);
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
   -webkit-transform: scale3d(1,1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
   -webkit-transform: scale3d(1,1,1);
  }
  100% {
   -webkit-transform: scale3d(0.1,0.1,1);
  }
}

/* Ссылка на кнопку Закрыть */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Сбрасываем изменения */
.modal a[href="#close"]:focus {
outline: none;
}

/* Создаем кнопку Закрыть */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Позиционируем */
position: absolute;
right: -10px;
top: -10px;
width: 20px;
padding: 1px 1px 1px 2px;

/* Стили */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #ffffff;
border: 3px solid #ffffff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 0px solid #000;
}

/* Открываем модальное окно */
a.openModal {

}

a.openModal:hover,
a.openModal:focus {
}

.modal .modal_title {
  display: block;
  text-align: center;
  font-size: 22pt;
}
  

Так как базовым направлением является создание сайтов с нуля, предлагаем создание авторских сайтов с удобным функционалом, для ведения бизнеса в интернете.

7 основных видов веб-дизайна сайта

7 основных видов веб-дизайна

Одной из самых обширных отраслей веб-разработок в настоящее время является область веб-дизайна. О достойном оформлении собственного ресурса должен позаботиться каждый веб-мастер. Грамотная разработка дизайна может стать гарантией того, что проект сможет составить достойную конкуренцию сторонним ресурсам, обладая высокими потребительскими свойствами и эстетическими качествами.

Разработка дизайна сайта. Уникальный дизайн - против шаблона!

Разработка дизайна сайта. Уникальный дизайн - против шаблона!

Разработка авторских сайтов. Отличия между уникальным дизайном и бесплатным шаблоном. На примере графика показано как изменения коснулись позиций.

Наши клиенты