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

Всплывающее окно обратного звонка на 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;
}
  

Заказать услугуЗаказать услугу
Информация по телефону: (+998 90) 983-33-69 Viber Telegram
Рассчитать разработку сайта на калькуляторе онлайн

Рассчитать разработку сайта на калькуляторе

Онлайн калькулятор расчета стоимости разработки проекта. Выберите интересующие параметры и узнайте цену на разработку - прямо сейчас!

Увеличение конверсии на 14% за счет mobile-friendly

Увеличение конверсии на 14% за счет mobile-friendly

Совместные исследования Google и Calltouch показали, что конверсия сайтов с mobile-friendly на 14% выше, чем у сайтов неадаптированных под мобильные устройства. Исследования проводились в 20-ти отраслях бизнеса с целью изучения уровня конверсий из посещений в звонки для мобильных и немобильных сайтов.

Как подбирать ключевые слова для Яндекс Директа

Как подбирать ключевые слова для Яндекс Директа

Описание эффективного подбора ключевых слов - настройка Яндекс Директа. Увеличение значения CTR для снижения стоимости рекламы.

Web-usability, повышение качества сайта

Web-usability, повышение качества сайта

Определение «usability» или полностью «web-usability» означает степень удобства использования сайта для пользователей и достижение ими определенных целей. Стандарт ISO 9241-11.

Инструкция по Dublin Core Metadata

Инструкция по Dublin Core Metadata

Если при анализе сайта вам выдается сообщение типа - Ваш веб-сайт не использует преимущества Dublin Core, то этот материал поможет исправить это.

Инструкция по переходу сайта на HTTPS

Инструкция по переходу сайта на HTTPS

Если у вас серьезный проект стоит задуматься о переходе с обычного соединения http на защищенное https.

Наши клиенты