Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Кнопка обратного звонка своими руками!

localhost

Автор: ,
в Opencart 2.x: Пісочниця

 Share

Recommended Posts

localhost Community Regular

localhost

Опубліковано:
Опубліковано:

Это всего лишь кнопка, а не модуль.... Пример реализации: http://pro100max.ru/bootstrap/callback.html

 

Как поставить на сайт

 

HTML код = вставляем в любое место

<!-- Callback -->
<div class="callback hidden-xs">
<a class="callback_link" data-toggle="modal" data-target="#myModal">
<div class="callback_block"><div class="callback_a"></div><div class="callback_b"></div></div>
</a>	
</div>
<!-- End Callback -->

CSS код

/************************************************************************************/
/* Callback 
/************************************************************************************/
.callback {background: #09f; border-radius: 50% !important; bottom: 40px; cursor: move; height: 50px; position: fixed; right: 40px; width: 50px; z-index: 9999; cursor:pointer;}
.callback .callback_link::before {background: rgba(0, 0, 0, 0) url(../images/phone.png) no-repeat scroll center center / 35px auto; content: ""; height: 50px; left: 0; position: absolute; top: 0; width: 50px; z-index: 11;}
.callback:hover {animation: 1.5s linear 0s normal none infinite running callback_anim;}
.callback:hover .callback_b, .callback:hover .callback_a {background-color: #09f; border-color: #09f;}
.callback .callback_block {height: 50px; position: absolute; width: 50px;}
.callback .callback_a {-webkit-animation: callback 3s linear 0s infinite; -moz-animation: callback 3s linear 0s infinite; animation: callback 3s linear 0s infinite; background-color: transparent; border: 2px solid #09f; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;}
.callback .callback_b {-webkit-animation: callback 1.5s linear 0s infinite; -moz-animation: callback 1.5s linear 0s infinite; animation: callback 1.5s linear 0s infinite; background-color: transparent; border: 2px solid #09f; border-radius: 100% !important; bottom: -25px; box-sizing: border-box; height: 100px; opacity: 0.01; position: absolute; right: -25px; width: 100px;}
@keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@-webkit-keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@-moz-keyframes callback {
0% {opacity: 0.8; transform: rotate(0deg) scale(0.46) skew(1deg);}
10% {transform: rotate(0deg) scale(0.56) skew(1deg);}
100% {opacity: 0.01; transform: rotate(0deg) scale(1) skew(1deg);}
}
@keyframes callback_anim {
0% {transform: scale3d(1, 1, 1);}
10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);}
100% {transform: scale3d(1, 1, 1);}
}
@keyframes callback_anim {
0% {transform: scale3d(1, 1, 1);}
10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
30%, 50%, 70%, 90% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg);}
40%, 60%, 80% {transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg);}
100% {transform: scale3d(1, 1, 1);}
}

Как поменять цвет

 

Найти и заменить в CSS = #09f на Ваш цвет #660000

 

Замена изображения на свое

 

Скачать кнопку = http://pro100max.ru/bootstrap/images/phone.png

Либо оставьте ее, либо рисуйте сами)))... Внимательно с путями к изображению в CSS....

 

P.S.

 

Данную кнопку можно прикрутить к любому модулю обратного звонка.... В примере реализации прикручено модальное окно...

 

 

Надіслати
Поділитися на інших сайтах

localhost Community Regular

localhost

Опубліковано:
  • Автор
Опубліковано:

логики нет... Что за бред?

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

Надіслати
Поділитися на інших сайтах

localhost Community Regular

localhost

Опубліковано:
  • Автор
Опубліковано:

Я думаю, речь идёт об отсутствии программной логики. То есть, о том, что эта кнопка ничего не делает.

Это всего лишь кнопка, а не модуль.... мой пост для тех, кто захочет модернизировать кнопку вызова обратного звонка..... вот и вся ЛОГИКА.... Да... это всего лишь CSS3 и HTML.... и что с того..... уж простите, после постов о бреде, как-то расхотелось помогать людям....

  • +1 2
Надіслати
Поділитися на інших сайтах

AlexFisher Grand Master

AlexFisher

Опубліковано:
Опубліковано: (змінено)

Простите, коллега, не хотел обидеть.

Но как-раз о программной логике и шла речь.

 

Ну вот мой вариант, если хотите:

 

Это где угодно:

<div id="callback-window"><!-- ему мы изначально в стилях даем display:none; -->
<form id="callbackForm">
<input id="callback-name" name="callback-name">
<input id="callback-phone" name="callback-phone">
<input id="callback-question" name="callback-question">
<input type="submit" value="Callback" id="sendCallback" class="button" />
</form>
</div>
 

js:

 

// итак, жмем на кнопку (коряво, но работает)
$('#callback-button').click(function(){
if ($('#callback-window').css('display') == 'none')
{
$('#callback-window').show(150);
}
else
{
$('#callback-window').hide(150);
}
});

// типа небольшой валидации 
validationCallback = function(){ 
var result = true; 
if ($('#callback-name').val() === '') { 
result = false; 
$('#callback-name').css("border", "1px solid #f00").css("background", "#ffebeb"); // тут мы на пустое поле проверяем и делаем постыдно красным =) В принципе, можно и регулярку подвесить, или еще чего. 
} 
if ($('#callback-phone').val() === '') { 
result = false; 
$('#callback-phone').css("border", "1px solid #f00").css("background", "#ffebeb"); //тут тоже 
} return result; // можно аналогично и с полем комментария поступать. Да и вообще можно много чего придумать. 
} 

// здесь само действие. Обращаемся к контроллеру. 
$('#sendCallback').click(function(){ 
if (validationCallback()) { 
$.post('/index.php?route=common/callback/callback', // а вот и адрес контроллера 
{ 'callback-name' : $('#callback-name').val(), 'callback-phone' : $('#callback-phone').val(), 'callback-question' : $('#callback-question').val() }, 
function(response){ 
if (response == 'success') {    
//тут мы реагируем на успешную отправку. показываем окей, или еще чего-то... 
} 
}); 
} return false; });

 

 

Контроллер:

class ControllerCommonCallback extends Controller {
public function callback () {
$feedback_field = 'например_фид';
$mailto_field = 'например_мыло_магазина';
$fheader_field = 'запрос_обратного_звонка';
$data = $this->request->post;
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf8' . "\r\n";
$msg = '
<html> 
<body>
<hr>
<p>Имя: '.$data['callback-name'].'</p>
<p>Телефон: '.$data['callback-phone'].'</p>
<p>Вопрос: '.$data['callback-question'].'</p> 
<hr> 
</body>
</html> 
';
mail($mailto_field, $feedback_field, $msg, $headers);
echo 'success';
}
}

Ну и сама кнопка ;) Чуть не забыл =)

<div id="callback-button">Перезвоните мне</div>

Вроде, все.

CSS - по вкусу ;)

 

Воооот.

Не поленился и более-менее показал, как забацать именно обратный звонок простейший.

Змінено користувачем AlexFisher
  • +1 3
Надіслати
Поділитися на інших сайтах
1

ArtemPitov Grand Master

ArtemPitov

Опубліковано:
Опубліковано:

Простите, коллега, не хотел обидеть.

Но как-раз о программной логике и шла речь.

 

Ну вот мой вариант, если хотите:

 

Это где угодно:

<div id="callback-window"><!-- ему мы изначально в стилях даем display:none; -->
<form id="callbackForm">
<input id="callback-name" name="callback-name">
<input id="callback-phone" name="callback-phone">
<input id="callback-question" name="callback-question">
<input type="submit" value="Callback" id="sendCallback" class="button" />
</form>
</div>
 

js:

 

// итак, жмем на кнопку (коряво, но работает)
$('#callback-button').click(function(){
if ($('#callback-window').css('display') == 'none')
{
$('#callback-window').show(150);
}
else
{
$('#callback-window').hide(150);
}
});

// типа небольшой валидации 
validationCallback = function(){ 
var result = true; 
if ($('#callback-name').val() === '') { 
result = false; 
$('#callback-name').css("border", "1px solid #f00").css("background", "#ffebeb"); // тут мы на пустое поле проверяем и делаем постыдно красным =) В принципе, можно и регулярку подвесить, или еще чего. 
} 
if ($('#callback-phone').val() === '') { 
result = false; 
$('#callback-phone').css("border", "1px solid #f00").css("background", "#ffebeb"); //тут тоже 
} return result; // можно аналогично и с полем комментария поступать. Да и вообще можно много чего придумать. 
} 

// здесь само действие. Обращаемся к контроллеру. 
$('#sendCallback').click(function(){ 
if (validationCallback()) { 
$.post('/index.php?route=common/callback/callback', // а вот и адрес контроллера 
{ 'callback-name' : $('#callback-name').val(), 'callback-phone' : $('#callback-phone').val(), 'callback-question' : $('#callback-question').val() }, 
function(response){ 
if (response == 'success') {    
//тут мы реагируем на успешную отправку. показываем окей, или еще чего-то... 
} 
}); 
} return false; });
 

 

Контроллер:

class ControllerCommonCallback extends Controller {
public function callback () {
$feedback_field = 'например_фид';
$mailto_field = 'например_мыло_магазина';
$fheader_field = 'запрос_обратного_звонка';
$data = $this->request->post;
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf8' . "\r\n";
$msg = '
<html> 
<body>
<hr>
<p>Имя: '.$data['callback-name'].'</p>
<p>Телефон: '.$data['callback-phone'].'</p>
<p>Вопрос: '.$data['callback-question'].'</p> 
<hr> 
</body>
</html> 
';
mail($mailto_field, $feedback_field, $msg, $headers);
echo 'success';
}
}
Ну и сама кнопка ;) Чуть не забыл =)

<div id="callback-button">Перезвоните мне</div>
Вроде, все.

CSS - по вкусу ;)

 

Воооот.

Не поленился и более-менее показал, как забацать именно обратный звонок простейший.

Ну это не совсем хорошо ....

Надіслати
Поділитися на інших сайтах
1
1
1

AlexFisher Grand Master

AlexFisher

Опубліковано:
Опубліковано:

Оверквотить - вот это не совсем хорошо ;)

Я и не претендую на гениальность. Просто рабочую кнопку смастерил по-быстрому.

Надіслати
Поділитися на інших сайтах
1

  • 4 months later...
  • 1 year later...

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду