Если у вас возникли вопросы, получить бесплатную консультацию можно по телефону: (+998 90) 983-33-69 (Viber, Telegram)

Internet Solution Group – Разработка Интернет проектов под ключ
Звоните: (+998 90) 983-33-69 (+998 90) 983-33-69 (Viber, Telegram)
Надежный хостинг на сервере для наших клиентов

Всплывающее окно обратного звонка на 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;
}
  
Прямой маркетинг (директ мейл)


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

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

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



Продвижение мобильных приложений

Продвижение мобильных приложений

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



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

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

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



Рекомендации по разработке и продвижению сайта

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



Web usability – для продвижения

Web usability – как фактор для продвижения сайта

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



Оптимизация структуры сайта для улучшения индексации

Мастер класс - как на примере установить 301 редирект, создать карту сайта, включить ЧПУ для сайта, создать иконку - favicon.



Заказать адаптивный дизайн или отдельную мобильную версию сайта

Адаптация дизайна или создание мобильной версии сайта

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



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

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

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







Клиенты компании WEBGROUP

  • Телефон: (+998 90) 983-33-69
  • Skype: Slava.Glindeman
  • E-mail: info@webgroupco.com

Internet Solution Group

Copyright © 2010-2017 Internet Solution Group. Все права защищены.
Разработка эксклюзивных сайтов и поисковое продвижение, прямой маркетинг и реклама в социальных сетях.