Аверто — красивые сообщения

В одном проекте понадобилось сделать вывод ошибки через alert(). Сама логика всплывающего уведомления мне понравилась, но то что это окно блокирует интерфейс меня расстроило. Да и внешним видом управлять нельзя.

Я решил сделать свой вариант всплывающих сообщений, так появился проект Аверто.

Аверто — красивый аналог alert(). Нажмите на кнопку чтобы увидеть.

Попробовать

Внешний вид, поведение и содержание сообщений задаётся через джаваскрипт: надо создать объект Averto и вызвать в нём функцию throw, задав параметры.

let Av = new Averto(); Av.throw({ message: 'Тестовое сообщение' });

Всего есть 6 параметров:

  • message — единственный обязательный параметр, текст сообщения

  • title — заголовок сообщения

  • color — шестнадцатеричный код цвета фона (по умолчанию красный)

  • autohide — скрывать ли сообщение автоматически (по умолчанию true)

  • timeout — таймаут скрытия в миллисекундах (по умолчанию 3000)

  • blocking — делает сообщение модальным, блокирует интерфейс и ждёт действия пользователя (по умолчанию false)

Цвет тени и текста рассчитывается сам. Приведённый выше пример — минимальный вариант, который запустится.

Объект стоит создавать единожды, т.к. он при инициализации приписывает ХТМЛ и ЦСС для сообщений.

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

Страницу проекта не успеваю оформить, поэтому скачать можно на гитхабе

Поделиться
Отправить
22 июня, 18:29   джаваскрипт