Офис НП 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). Теперь будем делать несколько всплывающих окон (popup window) на одной странице.
JQuery + Ajax: несколько всплывающих окон с контактами на одной странице
Опубликовал  Pisatel Добавлено  05-08-2014 10:16 05 Август 2014 10:16:59 4476  Прочтений 4476 Прочтений  0 Комментариев 0 Комментариев
 printer

JQuery + Ajax: несколько всплывающих окон с контактной информацией

В предыдущей статье на эту тему в комментариях мне был задан вопрос по поводу того, как сделать на одной странице не одно, а несколько всплывающих окон. Чуть подумав, решил немного изменить подход, а именно: использовать не метод hover(), а on() (соответственно, mouseenter - при наведении курсора на ссылку, и mouseleave - при уходе с нее).

Итак, начнем. Для примера вновь будем выводить номер телефона и адрес 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_many.js. Это — самый интересный момент, по ходу кода я буду давать небольшие комментарии:

Код: JQUERY
   $(document).ready(function() {

var array = {};

$('.popup_info').on({ mouseenter: 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'}); // иначе- скрываем

}

link.before($('#popup').css({'display': 'block'}).stop().animate({left: -120,opacity: 1},300)); //анимация появления блока с информацией и немного стиля

} else { // иначе- посылаем ajax- запрос для получения данных

$.ajax({

url:'/popup_contact_many.php',

type:'POST',

dataType:'json',

data:({'article_id': article_id}), //передаём значение rel в скрипт popup_contact_many.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'});

}

link.before($('#popup').css({'display': 'block'}).stop().animate({left: -120,opacity: 1},300)); // анимация появления блока

}

},

error: function(){

link.before($('#popup').css({'display': 'block', 'color': '#ff0000'}).stop().animate({left: -150,opacity: 1},300).html('Error! Not found!')); } //функция обработки ошибок

});

}

},

mouseleave: function(){ // данная функция сработает и закроет окно, когда курсор покинет ссылку

$(this).data('focused','false'); //устанавливаем для ссылки атрибут data-focused = "false"

$('#popup').stop().animate(

{bottom: '80px',opacity: 0},

200,

function(){

$('#popup').css({'display': 'none'});

});//анимация скрытия блока, когда курсор выйдет за пределы ссылки

$(this).siblings('#popup').hide();

}

});

});




Возможно, у кого-то может вызвать вопрос строчка $(this).siblings('#popup').hide(); — это изобретенный "костыль", который решил применить после того, как столкнулся с проблемой: последнее окно на странице никак не хотело исчезать, прилипало намертво. Именно поэтому добавил в конец функции, когда курсор покидает ссылку, сие творение. Если кто найдет более изящный способ — дерзайте. Так же, в этой версии всплывающих окон решил добавить обработчик ошибок при некорректном ответе сервера: ну мало ли что...

Далее мы создаем файл popup_contact_many.php, который выполнит запрос в бд MySQL. В отличие от предыдущей статьи, здесь будем использовать уже MySQLi

Код: PHP
<?php

if (isset($_POST['article_id']) && intval($_POST['article_id']) > 0){

// проверили, есть ли post данные, после этого выполняем подключение к бд

$link = mysqli_connect("myhost", "myuser", "mypass", "mydb") or die("Error ".mysqli_error($link));

$result = mysqli_query($link, "SELECT article_id, article_phone, article_email FROM article WHERE article_id='".$_POST['article_id']."' LIMIT 1") or die("Error ".mysqli_error($result));

if (mysqli_num_rows($result) > 0){

$data = mysqli_fetch_assoc($result);

echo json_encode($data);

// кодируем результат функцией json_encode()

mysqli_free_result($result);

}

mysqli_close($link);

} else {

die("Access Denied");

}

// intval() - примитивная проверка на целое число

?>




Ну и напоследок — немного стиля

Код: CSS
.contact {

position: relative; /*задаем позиционирование, чтобы popup окну задать абсолютное позиционирование */

float: right;

}

.contact a {

border: 1px solid black;

padding: 3px 4px;

border-radius: 4px;

}

#popup {

background-color: #eee;

background-image: linear-gradient(#eee,#ddd);

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: 10px solid transparent;

border-top-color: #eee;

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_many.js. То есть, теперь разметка будет выглядеть примерно так:

Код: HTML
<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_many.js'></script>

</head>

<body>

<div class='contact'>

<a href='#' title='Контакты' class='popup_info' rel='1'>Контакты</a>

<div id='popup'><div id='popup_phone'></div>

<div id='popup_email'>

</div></div>

</div>

<div class='contact'>

<a href='#' title='Контакты' class='popup_info' rel='2'>Контакты</a>

<div id='popup'><div id='popup_phone'></div>

<div id='popup_email'>

</div></div>

</div>

<div class='contact'>

<a href='#' title='Контакты' class='popup_info' rel='3'>Контакты</a>

<div id='popup'><div id='popup_phone'></div>

<div id='popup_email'>

</div></div>

</div>

<div class='contact'>

<a href='#' title='Контакты' class='popup_info' rel='4'>Контакты</a>

<div id='popup'><div id='popup_phone'></div>

<div id='popup_email'>

</div></div>

</div>

</body>

</html>




Что ж, несколько всплывающих popup-окон на одной странице при помощи JQuery + Ajax готовы. Демо смотрим здесь



Пробуйте. Вопросы задавайте в комментариях или на форуме- попробуем решить. Всего доброго.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
12614 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3159 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
12878 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7536 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
6711 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
51238 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3903 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
7880 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
8816 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2913 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5463 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7412 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
39608 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3596 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13373 13 Pisatel
03. апреля 2015