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



Пробуйте. Вопросы задавайте в комментариях или на форуме- попробуем решить. Всего доброго.
Понравилась статья?
Метки для данной статьи
Теги:  #jquery #ajax #php #html #popup window #всплывающие контакты #js #mysqli #javascript #jq 
Похожие статьи
Заголовок
Категория
Просмотров
22181
3190
7975
8229
35732
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 22333 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 68559 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 15358 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 17889 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 144837 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 14419 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 22551 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 26244 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 7667 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 36992 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 11795 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 31034 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 128334 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 8843 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 23185 13 Pisatel
03. апреля 2015