Офис НП AMWAY в Ярославле
→ На карте Купить AMWAY: офис в ЯрославлеКонсультации, презентации, мастер–классы, знакомство с продукцией, заказ и выдача купленного товара:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » JQuery + Ajax всплывающее окно контактов при наведении
Сниппет
Иногда необходимо защитить контактную информацию пользователей: например, чтобы она не была видна в исходном коде страницы, а подгружалась при непосредственных определенных действиях, без перезагрузки страницы. Этот вариант на JQuery + Ajax + PHP я и рассмотрю.
JQuery + Ajax всплывающее окно контактов при наведении
JQuery + Ajax: вывод номера телефона или любой другой информации
Недавно потребовалось мне реализовать вывод контактной информации (номер телефона, email, skype и т.п.) на одном из сайтов. Как это было лучше сделать, чтобы эта информация не была доступна ботам и всевозможным паукам? Подобное решение я видел на сайте avito.ru, где в исходном коде страницы вы не увидите контактных данных пользователя. Не знаю точно, как это реализовано там (подозреваю, что аналогично), но я выбрал Ajax, то есть подгрузку необходимых сведений из бд MySQL при определенных действиях пользователя (а именно- при наведении курсора на ссылку) без перезагрузки страницы.Итак, начнем. Для примера будем выводить номер телефона и адрес email, которые у нас будут лежать в бд MySQL. Назовем таблицу условно article, столбцы в ней article_id (идентификатор), article_article (здесь будет лежать информация, к которой нужно выводить контактные данные, например, это будет объявление), article_phone (здесь будет номер телефона), и article_email (здесь мыло)
Разметка страницы (точнее- ссылки) у нас будет выглядеть так:
Код: HTML
<div class='contact'>
<a href='#' title='Контакты' class='popup_info' rel='".$data['article_id']."'>Контакты</a>
<div id='popup'><div id='popup_phone'></div>
<div id='popup_email'>
</div></div>
</div>
Как вы обратили внимание, мы присвоили ссылке класс popup_info, а также добавили идентификатор самого объявления (через атрибут rel): это важно, нам необходимо привязать эту ссылку к конкретному объявлению, чтобы передать POST- запрос идентификатора для загрузки данных, привязанных к конкретному объявлению, из бд MySQL. Соответственно, $data['article_id'] - это идентификатор объявления. Далее идет контейнер div с id popup, в который мы и поместим полученную после запроса информацию. Априори я подразумеваю, что фреймворк JQuery у вас уже подключен.
Теперь нам необходимо создать файл, который будет передавать информацию для запроса, назовем его, например, popup_contact.js. Это- самый интересный момент, по ходу кода я буду давать небольшие комментарии:
Код: JQUERY
$(document).ready(function() {
var array = {};
$('.popup_info').hover(function(){ // когда курсор будет наведен на ссылку с классом popup_info, сработает следующая функция
$(this).data('focused','true'); //устанавливаем для ссылки атрибут data-focused = "true", это необходимо, чтобы окно оставалось открытым во время нахождения на ссылке курсора
var link = $(this); // запомнили текущую ссылку
var article_id = $(this).attr('rel'); //берем значение атрибута rel из ссылки для идентификации (привязки)
if(article_id in array){ //если такой запрос уже был, то отображаем блок с данными из существующего массива
if (array[article_id].article_phone.length > 1){ //примитивная проверка на пустоту, если значение больше 1 знака- выводим номер телефона из массива
$('#popup_phone').html(array[article_id].article_phone).prepend('Телефон: ');
} else {
$('#popup_phone').css({'display': 'none'}); // иначе- блок скрыт
}
if (array[article_id].article_email.length > 1){ // проверяем, есть ли мыло в массиве
$('#popup_email').html(array[article_id].article_email).prepend('E-Mail: ');
} else {
$('#popup_email').css({'display': 'none'}); // иначе- скрываем
}
$('#popup').css({'display': 'block'}).stop().animate({left: -130,opacity: 1},300); //анимация появления блока с информацией и немного стиля
} else { // иначе- посылаем ajax- запрос для получения данных
$.ajax({
url:'popup_contact.php',
type:'POST',
dataType:'json',
data:({'article_id': article_id}), //передаём значение rel в скрипт popup_contact.php методом POST
success: function(response){ // если запрос будет выполнен удачно, то массив, полученный из бд MySQL, попадет в response
if(link.data('focused') == 'true'){ //если курсор еще находится на ссылке, то показываем блок #popup
array[response.article_id] = {'article_id':response.article_id, 'article_phone':response.article_phone,'article_email':response.article_email}; // полученные данные из бд записываем в массив
if (response.article_phone.length > 1){ // если запись номера телефона больше 1 символа- выводим номер телефона
$('#popup_phone').html(response.article_phone).prepend('Телефон: ');
} else {
$('#popup_phone').css({'display': 'none'}); // иначе скрываем div
}
if (response.article_email.length > 1){ //если в ответе из бд есть адрес email- выводим его
$('#popup_email').html(response.article_email).prepend('E-Mail: ');
} else {
$('#popup_email').css({'display': 'none'});
}
$('#popup').css({'display': 'block'}).stop().animate({left: -130,opacity: 1},300); // анимация появления блока
}
}
});
}
},
function(){ // данная функция сработает и закроет окно, когда курсор покинет ссылку
$(this).data('focused','false'); //устанавливаем для ссылки атрибут data-focused = "false"
$('#popup').stop().animate({bottom: '50px',opacity: 0}, 200,
function(){
$('#popup').css({'display': 'none'});
}); //анимация скрытия блока, когда курсор выйдет за пределы ссылки
});
});
Далее мы создаем файл popup_contact.php, который выполнит запрос в бд MySQL
Код: PHP
<?php
// все подключения к бд я опускаю, это уж сами делайте
if (isset($_POST['article_id']) && intval($_POST['article_id']) > 0){
$result = mysql_query("SELECT article_id, article_phone, article_email FROM article WHERE article_id='".$_POST['article_id']."'");
if (mysql_num_rows($result) > 0){
$data = mysql_fetch_assoc($result);
echo json_encode($data);
// кодируем результат функцией json_encode()
}
} else {
die("Access Denied");
}
// intval() - примитивная проверка на целое число
?>
Ну и напоследок- немного css. Уж дорабатывайте на свое усмотрение, я лишь чуть украсил
Код: CSS
.contact {
position: relative; /*задаем позиционирование, чтобы popup окну задать абсолютное позиционирование */
float: right;
}
.contact a {
border: 1px solid black;
padding: 3px 4px;
border-radius: 4px;
}
#popup {
background-color: #ffb6c1;
background-image: linear-gradient(#ffe9e9,#ffb6c1);
border-radius: 8px;
box-shadow: 0 0 3px #333;
color: #000;
padding: 10px 5px;
display: none;
position: absolute;
bottom: 80px;
}
#popup:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid transparent;
border-top-color: #ffb6c1;
top: 100%;
left: 90%;
margin-left: -15px;
}
#popup#popup_email, #popup#popup_phone {
font-size: 16px;
line-height: 3px;
font-weight: bolder;
padding: 6px 6px 3px 6px;
}
Не забудьте только после подключения фреймворка JQuery подключить в шапке страницы наш обработчик popup_contact.js. То есть, теперь разметка будет выглядеть примерно так:
Код: HTML
<head>
<link rel='stylesheet' href='popup_contact.css' type='text/css' media='screen' />
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='popup_contact.js'></script>
</head>
<body>
<div class='contact'>
<a href='#' title='Контакты' class='popup_info' rel='".$data['article_id']."'>Контакты</a>
<div id='popup'><div id='popup_phone'></div>
<div id='popup_email'>
</div></div>
</div>
</body>
Ну вот, в общем, мы и создали popup окно на JQuery + Ajax. Демо можно посмотреть здесь
Пробуйте. Будут вопросы- пишем, спрашиваем, чем смогу- помогу. Всех благ.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
Темы | Просмотров | Ответов | Последние сообщения | |
Вопрос по переделке bb-кода PHP, MySQL |
22328 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
68541 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15356 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
17887 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
144795 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14415 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
22549 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26236 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7663 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
36988 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
11792 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31031 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
128279 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8841 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23180 | 13 | Pisatel 03. апреля 2015 |