Блок "Оповещение" создается одноименным конструктором при загрузке страницы. В качестве параметров принимает место вывода и строку для уведомления.
Для демонстрации работы можно нажать на кнопки ниже. Каждая кнопка выводит свой текст в блоке оповещения в нужном месте страницы.
Блок автоматически скрывается через четыре секунды, или при нажатии на крестик в теле блока. Если браузер поддерживает CSS-анимацию, прозрачность блока постепенно уменьшается до нуля.
Описание блока оповещений.
Блок оповещений создается функцией-конструктором. При создании объекта класса Notify запускается метод create из свойства prototype конструктора.
Метод create создает блок оповещения с полем для текста и элементом для скрытия.
Показ уведомления происходит с помощью метода show,
который получает в качестве аргументов строку с условием места вывода (например, "top-left") и строкой текста, которую нужно вывести в уведомлении.
Сразу же запускается таймер с задержкой для запуска метода скрытия уведомления hide. Метод hide проверяет, поддерживает ли браузер CSS-анимацию, и затем либо сразу скрывает блок оповещения, либо вначале снижает его прозрачность. При этом благодаря CSS-свойству transition прозрачность уменьшается плавно до нуля.