Создание простых всплывающих подсказок на JS RUDEBOXНе спорю, отсутствие на сайте подсказок не так уж критично, но бывают такие моменты когда они просто необходимы, к примеру вывести быструю информацию о состоянии заказа, или указать пользователю на его ошибку при заполнении анкеты при регистрации. Такие мелочи позволяют удержать пользователя на сайте, проинформировать и упростив дизайн сайта не перебрасывая каждый раз пользователя на страницу с ошибкой. В данном уроке мы рассмотрим достаточно простую анимацию для всплывающих подсказок сайта реализованных с помощью JavaScript.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Задумка простая, у нас будет кнопка, при нажатии на которую пользователю будет отображаться достаточно привлекательное окно, с прокруткой, которое будет содержать описание проблемы.

Шаг 1. HTML

У нас будет основной класс «wrapper», в которого будет заключена наша подсказка, а именно класс «popup» в котором будет выводится наша подсказка и «popup__inner» для отображения иконки принадлежности.

Также у мы создаем кнопку с классом trigger, для которой мы устанавливаем некоторые правила отображения, позиционирования и расцветки.

Создание простых всплывающих подсказок на JS RUDEBOX

Шаг 2. CSS

Для начала, мы указываем общие параметры контейнера с нашей подсказкой:

Затем мы указываем параметры самого окна, его обводку, и позиционирование в пространстве:

В результате мы получаем практически функциональное окно, с необходимой нам подсказкой, но осталось несколько штрихов.

Шаг 3. JS

Нам необходимо чтобы наша кнопка реагировала на нажатия, кроме этого нам нужно, чтобы в сплывающем окне была приведена подсказка с текстом:

Вот и все. Готово!