Обратная связь - как привязать к кнопке всплывающее окно?

голоса: 0
Добрый день!  Подскажите, пожалуйста, как к кнопке "звонок" привязать всплывающее окно? Ситуация следующая - вставила на сайт анимированную кнопку для заказа обратного звонка, следую инструкции http://zornet.ru/load/knopka_obratnogo_zvonka_animacija_na_css/81-1-0-8152 . Теперь не знаю как сделать, чтобы при щелчке на нее появлялось окно для ввода данных Имени, телефона и т.д., по факту заполнения которых они бы поступали на почту. Ссылка на мой сайт - http://apollonia63.ru/ .Заранее большое спасибо за помощь!
Адрес сайта http://apollonia63.ru/
| Автор: | Категория: JavaScript
Изменение категории | | Автор: webanet

Ответов: 2

Голоса: +1
 
Лучший ответ

Готовое решение обратного звонка для сайта uCoz

1. Перейдите в глобальный блок нижняя часть сайта http://ваш-сайт.ру/panel/?a=tmpl;m=1;t=BFOOTER (вместо ваш-сайт.ру прописать ссылку на свой сайт) и ставим в самый низ после всего кода что там есть вот такой код:

 
стили и код HTML

2. В коде выше я выделил красным в коде $MFORM_1$ номер айди формы, если у вас несколько форм, пропишите айди нужной вам формы.

3. Не забываем загрузить иконку https://9bclass.ucoz.ru/File/mini5.png себе в файловый менеджер и прописать свою ссылку на файл фото.

4. В результате при нажатии на иконку откроется форма обратного звонка вида:

конечно у вас будут свои поля номер телефона и имя клиента, что вы добавите в свою форму, в примере выше стандартная форма.

| Автор:
Выбор ответа лучшим | | Автор: Юлия Щербакова #3
голоса: 0

<div  id="popup__toggle"  style="display:none">$MFORM_1$</div>
<a onclick="$('#popup__toggle').slideToggle('slow');" href="javascript://"><div class="circlephone" style="transform-origin: center;"></div><div class="circle-fill" style="transform-origin: center;"></div><div class="img-circle" style="transform-origin: center;"><div class="img-circleblock" style="transform-origin: center;"></div></div>
</a>

| Автор:
Спасибо за ответ! Сориентируйте, пожалуйста, куда нужно вставить этот код?
Юлия Щербакова #3,
вместо кода вашей кнопки
Когда вставляю код в ,верхнюю часть сайта, как было до этого, то кнопка съезжает в угол на верх, что не очень смотрибельно... Как сделать, чтобы она оставалась также в правом нижнем углу при прокрутке страницы? И можно, чтобы форма для заполнения данных открывалась по центру страницы? Спасибо!
Юлия Щербакова #3,

Чтобы всегда была фиксированной внизу, редактируем стили:

 
стили

вместо красного прописать fixed и тогда будет внизу на одном месте.

...