Какими ”сладостями” привлечь потенциального клиента? Как его заставить пообщаться? Решить эти проблемы может всплывающее окно с формой ”заказать обратный звонок”. Вот и сегодня попробуем создать подобный ”пряник” без использования библиотек jQuery или Mootools
Самая неприятная задача при создании сайта – это как побороть конфликты между библиотеками jQuery и Mootools? Первое, что приходит в голову, так это использовать по минимум эти библиотеки и тогда шансов на конфликт – минимум.
Не всегда удается изобразить и добиться желаемого эффекта без этих библиотек – скажете Вы. И с этим трудно не согласится. Вот и в этом материале попытаемся использовать только HTML, PHP и CSS для создания всплывающего окна, в котором разместим форму заказа обратного звонка.
Чем хорош может быть этот пример? Только тем, что он не использует библиотек и не привязан к какой-либо системы управления сайтом (CMS), а значит, этот пример может быть установлен на любую страницу, интегрирован на любую CMS.
Обратный звонок в модальном окне
Как и полагается, создадим HTML-код будущей формы
<
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 = 'info@mysait.com';
/* Отправляем email */
mail($email, "Заказ обратного звонка на сайте ...", "\n
Посетитель заказал обратный звонок! \n
Телефон : ".$_POST['tel']."
");
echo 'Заявка принята!';
}
?>
</
div
>
/* END Блок Формы */
</
div
>
<
a
href
=
"#close"
title
=
"Закрыть"
>
Закрыть
</
a
>
</
div
>
</
div
>
И еще один важный момент – это строка, которая вызывает само всплывающее окно с формой
<
a
href
=
"#modal"
class
=
"button openModal"
>
Заказать обратный звонок
</
a
>
Основа для всплывающего окна создана, кажется ничего не упустил. Теперь же самое основное – это создания эффекта вывода окна на экран и без использования библиотек jQuery и Mootools.
Ранее
уже рассматривали аналогичную задачу, в котором использовались JavaScript-ы, здесь же никаких скриптов. Приступим.
/* Контейнер */
.modal
{
/* Слой перекрытия */
position
:
fixed
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
rgba(
0
,
0
,
0
,
0.5
)
;
z-index
:
10000
;
/* Трансформации прозрачности при открытии */
-webkit-transition
:
opacity
500
ms ease-in
;
-moz-transition
:
opacity
500
ms ease-in
;
transition
:
opacity
500
ms ease-in
;
/* Скрываем изначально */
opacity
:
0
;
pointer-events
:
none
;
}
/* Показываем модальное окно */
.modal
:target
{
opacity
:
1
;
pointer-events
:
auto
;
}
/* Содержание */
.modal
>
div
{
width
:
300
px
;
background
:
#ffffff
;
position
:
relative
;
margin
:
10
% auto
;
/* По умолчанию минимизируем анимацию */
-webkit-animation
:
minimise
500
ms linear
;
/* Придаем хороший вид */
padding
:
30
px
;
-moz-border-radius
:
7
px
;
border-radius
:
7
px
;
-webkit-box-shadow
:
0
3
px
20
px
rgba(
0
,
0
,
0
,
0.9
)
;
-moz-box-shadow
:
0
3
px
20
px
rgba(
0
,
0
,
0
,
0.9
)
;
box-shadow
:
0
3
px
20
px
rgba(
0
,
0
,
0
,
0.9
)
;
text-shadow
:
0
1
px
0
#fff
;
}
/* Изменяем анимацию при открытии модального окна*/
.modal
:target
>
div
{
-webkit-animation-name
:
bounce
;
}
.modal
h2
{
font-size
:
36
px
;
padding
:
0
0
20
px
;
}
@-webkit-keyframes bounce
{
0%
{
-webkit-transform
:
scale3d(
0.1
,
0.1
,
1
)
;
-webkit-box-shadow
:
0
3
px
20
px
rgba(
0
,
0
,
0
,
0.9
)
;
}
55%
{
-webkit-transform
:
scale3d(
1.08
,
1.08
,
1
)
;
-webkit-box-shadow
:
0
10
px
20
px
rgba(
0
,
0
,
0
,
0
)
;
}
75%
{
-webkit-transform
:
scale3d(
0.95
,
0.95
,
1
)
;
-webkit-box-shadow
:
0
0
20
px
rgba(
0
,
0
,
0
,
0.9
)
;
}
100%
{
-webkit-transform
:
scale3d(
1
,
1
,
1
)
;
-webkit-box-shadow
:
0
3
px
20
px
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
:
-
10
px
;
top
:
-
10
px
;
width
:
20
px
;
padding
:
1
px
1
px
1
px
2
px
;
/* Стили */
text-decoration
:
none
;
text-shadow
:
none
;
text-align
:
center
;
font-weight
:
bold
;
background
:
#000
;
color
:
#ffffff
;
border
:
3
px solid
#ffffff
;
-moz-border-radius
:
20
px
;
border-radius
:
20
px
;
-webkit-box-shadow
:
0
1
px
3
px
rgba(
0
,
0
,
0
,
0.5
)
;
-moz-box-shadow
:
0
1
px
3
px
rgba(
0
,
0
,
0
,
0.5
)
;
box-shadow
:
0
1
px
3
px
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
:
0
px solid
#000
;
}
/* Открываем модальное окно */
a
.openModal
{
}
a
.openModal
:hover
,
a
.openModal
:focus
{
}
.modal
.modal_title
{
display
:
block
;
text-align
:
center
;
font-size
:
22
pt
;
}
И что у нас получилось?
Вот собственно и весь код модального окна без библиотек jQuery и Mootools. Единственное, что хотелось бы добавить, так это разное содержание всплывающего окна. Это может не только форма обратного звонка, но и отправка сообщения, важная информация и тд.
Март 18th, 2015 в 12:59
добрый день.
подскажите, куда вставляется (между какими тегами)код эффекта вывода окна на экран?
Март 18th, 2015 в 19:37
Код HTML формы размещаете в любом месте страницы, между тегами body — /body. Как я поступаю в таких ситуациях? Размещаю подобные коды в конце страницы, но а вот ссылку на вызов этого окна надо разместить в той части, где желаете видеть кнопку или надпись «Заказать обратный звонок». Стили CSS копируете и устанавливаете в отдельном файле стилей сайта, например, это может быть template.css или style.css
Июнь 26th, 2015 в 08:08
не работает! поподробней бы!
Июнь 26th, 2015 в 14:44
Что именно не работает? Не выводится само окно или не отправляет — подробнее
Июль 5th, 2015 в 00:31
У меня форма отображается нормально, но письма не приходят и нет сообщения про то, что отослано!
Июль 6th, 2015 в 14:55
Письма то в целом уходят с сайта, проверяли? Проблема может скрываться в настройках Хостинга, может Хостинг не отправляет сообщений. Как проверить? Смотрите материал Хостинг. Проверяем отправку почты
Июль 7th, 2015 в 16:08
Не все стили отображаються почему-то. Кнопка выглядит вот так:
Июль 8th, 2015 в 15:53
Проинспектируйте стили с помощью Firebug для мозилы или Стрекозы (опера). Посмотрите, подгружаются ли стили. Если нет — смотрите файл стилей или попробуйте очистить кеш сайта и браузера
Октябрь 26th, 2015 в 12:27
Добрый день! Подскажите как добавить строку «ИМЯ» и скрипт для ее отправки на почту
Октябрь 26th, 2015 в 17:43
в HTML код небходимо добавить строку с переменной Имя (name), например
И ниже добавить эту же переменную (name) для отпраки, например
Февраль 1st, 2016 в 23:37
Под хромом и лисом все работает, но вот Explorer 9 проблемы выше версии нет.
Февраль 2nd, 2016 в 15:40
Что именно не правильно отображается? Хорошо бы ссылку на сайт.
Апрель 26th, 2016 в 03:24
Здравствуйте!
Спасибо за статью: Всплывающее окно
Помогите решить проблему пожалуйста.
После нажатия кнопки отправить, окно не закрывается(((
Как закрыть при нажатии отправить???
Спасибо!
myvisa@mail.ru