Блок оповещений

Блок "Оповещение" создается одноименным конструктором при загрузке страницы. В качестве параметров принимает место вывода и строку для уведомления.

Для демонстрации работы можно нажать на кнопки ниже. Каждая кнопка выводит свой текст в блоке оповещения в нужном месте страницы.

Блок автоматически скрывается через четыре секунды, или при нажатии на крестик в теле блока. Если браузер поддерживает CSS-анимацию, прозрачность блока постепенно уменьшается до нуля.

Вывести уведомление вверху
Вывести уведомление посередине
Вывести уведомление внизу

Описание блока оповещений.

Блок оповещений создается функцией-конструктором. При создании объекта класса Notify запускается метод create из свойства prototype конструктора.

Метод create создает блок оповещения с полем для текста и элементом для скрытия.

Показ уведомления происходит с помощью метода show, который получает в качестве аргументов строку с условием места вывода (например, "top-left") и строкой текста, которую нужно вывести в уведомлении.

Сразу же запускается таймер с задержкой для запуска метода скрытия уведомления hide. Метод hide проверяет, поддерживает ли браузер CSS-анимацию, и затем либо сразу скрывает блок оповещения, либо вначале снижает его прозрачность. При этом благодаря CSS-свойству transition прозрачность уменьшается плавно до нуля.

Поделится ссылкой: