[тест] Узнайте, как раскрутить свой сайт с нуля до 900 человек в сутки?! Пройти тест
Лого www.SiteHere.ru

Красивая всплывающая подсказка при нажатии

Красивая всплавающая подсказка при нажатии

На сайте уже есть несколько уроков по поводу всплывающих подсказок. Ссылки на эти уроки вы можете найти в полной новости. Но в этом уроке мы рассмотрим немного другой вид всплывающих подсказок. Их значительное отличие состоит в том, что они имеют множество функций для настройки. Можно менять текст кнопок, изменять положение подсказок, затемнять или не затемнять страницу при появлении подсказки, а также многие другие настройки.

Похожие уроки про всплывающие подсказки:

Пример можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться?

HTML часть

Необходимо скачать и подключить библиотеку jQuery(она находится в папке с демо) и guiders-1.3.0.js(сам плагин и стили можно скачать здесь):

1
2
3
<link rel="stylesheet" type="text/css" href="css/guiders-1.3.0.css" />		
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/guiders-1.3.0.js"></script>

Всплывающую подсказку можно привязать к ссылке, кнопке, текстовому полю и т.д. В этом уроке мы будем использовать ссылки. То есть после нажатии на ссылку будет появляться всплывающая подсказка как на изображении ниже:

Пример подсказки
1
2
3
4
5
6
7
<html>
<body>
    <div style="text-align:center;">
        <a id="demo" href="#" >Нажми!<a>
    </div>
</body>
</html>

jQuery часть

После того как добавили ссылку, кнопку или любой другой элемент управления, необходимо с помощью jQuery привязать подсказку:

1
2
3
4
5
6
7
8
9
10
11
12
$('#demo').click(function(){
    guiders.createGuider({
    attachTo: "#demo",
    buttons: [{name: "Закрыть",onclick:guiders.hideAll}],
    title: "Нажми здесь чтобы переместиться к следующему элементу",
    description: "Подсказки могут быть использованы для перемещения по элементам страницы",      
    id: "tip",
    overlay: true,
    position:6,
    autoFocus:true
    }).show();
});

Рассмотрим более детально каждое свойство:

  • attachTo: — (необязательно) данное свойство определяет класс или идентификатор элемента, к которому будет «привязана» подсказка.
  • buttons: — массив объектов кнопок.
  • title: — данное свойство отвечает за заголовок всплывающей подсказки.
  • description: — подробное описание подсказки.
  • overlay: — (необязательно) если значение равно «true», тогда остальная часть страницы затемняется при появлении подсказки.
  • position: — (необязательно/обязательно если используется свойство attachTo) задает положение, где появится подсказка. Как в часах, здесь задается положение появления подсказки(всего 12 положений).
  • autoFocus: — (необязательно) если желаете чтобы прокрутить окно браузера к тому месту где появилась всплывающая подсказка, тогда нужно установить данное свойство в значение «true».

Вывод

Неплохие подсказки, которые можно применять чтобы более компактно расположить информацию. Либо при регистрации показать всплывающее сообщение чтобы уведомить о чем-то пользователя, и т.д.

Успехов!

Источник: http://www.onextrapixel.com/2014/02/04/creating-guided-product-tours-like-google-facebook/

Красивая всплывающая подсказка при нажатии 4.63/5 (92.50%) 8 голос(ов)

Понравилась статья - расскажи друзьям! :)

8 комментариев к записи
  • Артём

    Надо будет поэксперементировать 😎

     
  • Константин

    Спасибо, пригодится!

     
  • Денис

    Как сделать что бы после нажатия на кнопку "Далее" переходила по ссылке?

     
  • Дмитрий

    Спасибо, всё работает.

    Подскажите как сделать чтобы подсказка открывалась автоматически при загрузке страницы?

     
    • Юрий

      Дмитрий, посмотрите 5-й пример в данном демо.

       
      • Дмитрий

        Спасибо за ответ.

        Я не правильно объяснил.

        Как сделать чтобы первая подсказка открывалась только первый раз, а при последующих загрузках этой страницы нет?

         
        • Юрий

          Для этого придется написать небольшой JS код, потому что необходимо использовать cookie чтобы "запомнить" просматривал ли пользователь данную страницу или нет.

           
          • Дмитрий

            Да это я знаю. Просто думал может здесь это предусмотрено.

            Всё равно спасибо.

             

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *