Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис 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 всплывающее окно контактов при наведении
Опубликовал  Pisatel Добавлено  12-04-2014 09:02 12 Апрель 2014 09:02:04 14564  Прочтений 14564 Прочтений  19 Комментариев 19 Комментариев
 printer

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. Демо можно посмотреть здесь

Пробуйте. Будут вопросы- пишем, спрашиваем, чем смогу- помогу. Всех благ.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | kot1228 20 апреля 2014 20:50:14
No Avatar
Гость
Помучился но получилось!!! спасибо! искал давно именно такое!! еще бы сделать это окно с мелодией ну когда наводиш на ссылку
#2 | Pisatel 23 апреля 2014 17:27:55
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Это, в принципе, несложно совсем. Как будет время- напишу.
kot1228, вот сие чудо Sound in mouseinter
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#3 | maksbazhin 30 июля 2014 10:08:17
No Avatar
Гость
Тоже помучился, но получилось не до конца: окно всплывает в правом нижнем углу экрана, а не рядом с ссылкой. Не понял как будет выглядеть в случае с большим количеством ссылок т.е. таблица строк на 50.
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Завтра посмотрим, сейчас на работе, некогда.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Итак, возможные причины неверного отображения окна: нашему окну мы задали свойство position как absolute, то есть отсчет координат должен вестись от родителя. Задайте родителю свойство relative, тогда вы сможете управлять положением окна относительно родителя (в нашем случае- это может быть ссылка), если свойство position у родителя не задано, отсчет ведется от края окна браузера http://htmlbook.r...s/position
Далее. В чем проблема при нескольких ссылках? Главное, чтобы у каждой был свой id, передаваемый через rel.
Так же у себя я добавил setTimeout при "покидании" курсора ссылки, то есть, окно исчезает не сразу, а после определенного времени (5сек)
Код: JQUERY
        $(this).data('focused','false'); //устанавливаем для ссылки атрибут data-focused = "false"
setTimeout(function(){
$('#popup').stop().animate(
{bottom: '80px',opacity: 0},
200,
function(){
$('#popup').css({'display': 'none'});
}); //анимация скрытия блока
}, 5000);
});



Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#6 | maksbazhin 31 июля 2014 10:49:50
No Avatar
Гость
проблема неправильного отображения ссылки была в неверном расположении </div>:
echo "<div class='contact'><a href='#' title='Контакты' class='popup_info' rel='$id'>Контакты</a>";
echo "<div id='popup'><div id='popup_phone'><div id='popup_email'></div></div></div></div>";
Проблема нескольких ссылок:
окно всплывает у первого на странице <div id='popup'> по идее надо сделать из тоже уникальными <div id='popup$id'> в принципе я это сделал popup_contact.js поправил, но тогда надо и стили делать уникальными, а это пока для меня проблема. Хотя может я и мудрю?
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Вообще, изначально было расчитано на вывод только одного окнаОчень смешно Нельзя на одной странице использовать несколько идентификаторов с одним именем. И, по идее, привязывать нужно к ссылке, так как она у нас уже имеет свой идентификатор в rel, и, по сути, является родителем для ид popup.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#8 | maksbazhin 31 июля 2014 13:53:47
No Avatar
Гость
Одна ссылка - не интересно. В интернете куча уроков по модальным окнам и везде в коментах вопросы про второе и более окно. К сожалению я не программист и близко не понимаю в JS. У знакомого в офисе поднял веб сервер, нарисовал на PHP и MySQL прогу для внутреннего пользования которая объединяет несколько отделов, к сожалению получилось слишком много информации на странице, чтобы разгрузить ее пытаюсь вставить модальное окно которое будет подгружать дополнительную информацию.
Пока сделал так:
в index.php
Код
echo "<div class='contact'><a href='#' title='Контакты' class='popup_info' rel='$id'>Контакты</a>";
echo "<div id='popup$id'><div id='popup_phone$id'></div><div id='popup_email$id'></div></div></div>";

в popup_contact.js
Код
var popup = "#popup"+id;
var p_p = "#popup_phone"+id;
var p_e = "#popup_email"+id;

осталось только со стилями разобраться, а в идеале в дальнейшем во всплывающего окна сделать диалоговое. как так. Прошу по возможности помощи, в JS я слаб.
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
К сожалению, в js я тоже не силен. Все это хобби. Да и времени сейчас практически нет свободного. Как появится- попробую поколдовать.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#10 | Pisatel 03 августа 2014 14:38:08
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
maksbazhin, набросал подобное, но не могу всесторонне проверить: железа нет под рукой, посмотрите, если это то, что нужно- скину файл http://www.meweb....?page_id=4
Заменил метод hover() на on() (mouseenter и mouseleave соответственно).
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#11 | Pisatel 11 августа 2014 18:27:17
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
http://www.meweb....icle_id=61 готовый вариант
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#12 | Виталий 09 июня 2015 15:56:01
No Avatar
Гость
Хочу сделать такое меню как на сайте http://www.forex.ua что бы открывалось по клику. Искал примеры но ничего найти не удалось. Может кто поможет, в долгу не останусь!
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Ну это битрикс. Копайте в этом направлении
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#14 | maksbazhin 11 мая 2016 07:31:59
No Avatar
Гость
Еще раз оживлю тему (больно решение удачное), сейчас изменилась задача и надо выводить небольшую таблицу, т.е. это проход по двухмерному массиву и вывод на экран нескольких окон друг за другом (тут наверное больше проблема с позиционирование) или одного большого (опять же позиционирование по центру экрана). Вот только как это реализовать не соображу, может будут идеи?
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
maksbazhin, думаю, с таблицей будет проще Например, файл popup_contact.php сразу отдает нам таблицу
Код
  $result = mysqli_query("SELECT name, adres, phone FROM table WHERE id='".$_POST['id']."'");
      if (mysqli_num_rows($result) > 0){
    $res = "<table>
       <tr>
         <td>Имя<td>Адрес<td>Телефон
        </tr>";
    while ($data = mysqli_fetch_object($result)) {
    $res .= "<tr>
         <td>".$data->name."<td>".$data->adres."<td>".$data->phone."
      </tr>";
}
    $res .= "</table>";
       echo json_encode($res);
};

Надеюсь, ход мысли понятен
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#16 | maksbazhin 12 мая 2016 11:54:29
No Avatar
Гость
спасибо все получилось, я не правильно понимал принцип работы, думал надо будет проходить по двухмерному массиву полученному из php. Единственная проблема можно ли всплывающее окно сцентрировать по центру экрана, а то у ссылок, в верхней части экрана, окно уходит частично за край.
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Код
           $('#popup').css({'display': 'block'}).stop().animate({left: -130,opacity: 1},300);
- в js
Код
#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;
}
- в css
В принципе, эти два куска отвечают за расположение на экране.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#18 | Alex_Cross 07 февраля 2017 14:04:23
No Avatar
Гость
Здравствуйте! Надеюсь сюда еще кто-то заходит. Я скопировал код, все сделал так, как в инструкцие - но у меня не работает. Я не понимаю почему. Подскажите пожалуйста!
#19 | Pisatel 09 февраля 2017 11:42:11
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Alex_Cross, здравствуйте. Поконкретнее, пожалуйста. А лучше пример
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
543 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
3780 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5719 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3413 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
35254 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2664 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
4673 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
5224 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
1922 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
7228 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3049 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4486 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
20488 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2330 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
9936 13 Pisatel
03. апреля 2015