Апрель 27, 2015 Запись была обновлена
Красивая всплывающая подсказка при нажатии
На сайте уже есть несколько уроков по поводу всплывающих подсказок. Ссылки на эти уроки вы можете найти в полной новости. Но в этом уроке мы рассмотрим немного другой вид всплывающих подсказок. Их значительное отличие состоит в том, что они имеют множество функций для настройки. Можно менять текст кнопок, изменять положение подсказок, затемнять или не затемнять страницу при появлении подсказки, а также многие другие настройки.
Похожие уроки про всплывающие подсказки:
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
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/
Чтобы получать свежие статьи - выберите любой удобный для вас мессенджер ниже - просто кликните по нему:
Надо будет поэксперементировать 😎
Спасибо, пригодится!
Как сделать что бы после нажатия на кнопку "Далее" переходила по ссылке?
Спасибо, всё работает.
Подскажите как сделать чтобы подсказка открывалась автоматически при загрузке страницы?
Дмитрий, посмотрите 5-й пример в данном демо.
Спасибо за ответ.
Я не правильно объяснил.
Как сделать чтобы первая подсказка открывалась только первый раз, а при последующих загрузках этой страницы нет?
Для этого придется написать небольшой JS код, потому что необходимо использовать cookie чтобы "запомнить" просматривал ли пользователь данную страницу или нет.
Да это я знаю. Просто думал может здесь это предусмотрено.
Всё равно спасибо.