Как создать всплывающие сообщения для сайта?

Статья, в которой рассмотрим, как можно самостоятельно создать для сайта всплывающие сообщения (уведомления) подобно тому, как это выполняет jGrowl (плагин для jQuery).
Проект, рассматриваемый в рамках этой статьи, расположен на Github по адресу: https://github.com/itchief/how-to/tree/master/toast
Всплывающие сообщения - это ненавязчивая система уведомлений для сайтов и веб-приложений. Их основная цель заключается в том, чтобы показать конечному пользователю уведомления заметным образом, которые не мешают его работе и в то же время держат его в курсе.
В этом проекте рассмотрим создание библиотеки для всплывающих сообщений (уведомлений) как с использованием jQuery, так и без него (т.е. на «чистом» JavaScript).
Внешний вид всплывающих сообщений
В рамках этого проекта выполним создание 2 вариантов сообщений (с заголовком и без него).

По умолчанию сообщения будем выводить в правом верхнем углу страницы.
Описание использования созданной библиотеки для всплывающих сообщений
Библиотека для всплывающих сообщений состоит из 2 файлов ("toast.css" и "toast.js"). Преимуществом данной библиотеки является то, что она имеет очень маленький объем (менее 3Кбайт). В отличие от библиотеки jGrowl данный проект имеет реализацию всплывающих сообщений без использования библиотеки jQuery. Что является для некоторых проектов очень важным.
Подключение библиотеки для создания всплывающих сообщений к странице
Подключение библиотеки для создания уведомлений на страницу осуществляется посредством:
- подключения CSS файла «toast.css» или «toast-with-header.css» к странице или включения содержимого одного из этих файлов в свой файл стилей;
- добавления JavaScript файла «toast.js» или «toast-with-header.js» на страницу с помощью элемента script или включения содержимого одного из этих файлов в свой файл скриптов.
... <link href="path/to/toast.css" rel="stylesheet"> ... <script src="path/to/toast.js"></script>
Создание всплывающих сообщений
Добавление на страницу всплывающих сообщений осуществляется посредством вызова статического метода add функции-конструктора Toast:
Синтаксис кода для всплывающих сообщений с заголовком:
/* Параметры функции add: header (строка) - название заголовка body (строка) - текст сообщения color (строка) - цвет в формате #rrggbb autohide (булево) - скрывать ли автоматически всплывающее сообщение delay (число) - количество миллисекунд, после которых сообщение будет автоматически скрыто */ Toast.add({ header: 'Название заголовка', body: 'Текст сообщения', color: '#28a745', autohide: true, delay: 10000 });
Для сообщений без заголовка:
/* Параметры функции add: text (строка) - текст сообщения color (строка) - цвет в формате #rrggbb autohide (булево) - скрывать ли автоматически всплывающее сообщение delay (число) - количество миллисекунд, после которых сообщение будет автоматически скрыто */ Toast.add({ text: 'Текст сообщения...', color: '#28a745', autohide: true, delay: 5000 });
Как разработать всплывающие сообщения для сайта
В этом проекте созданы различные варианты всплывающих сообщений. Подробно разберём только вариант, в котором они построены на "чистом" JavaScript и имеют внешний вид «без заголовка».
Создание всплывающих уведомлений начнём с разработки их HTML структуры:
<!-- HTML --> <div class="toast"> Текст сообщения... <button class="toast__close" type="button">×</button> </div>
Как видно, HTML синтаксис сообщений очень прост. Он состоит из элемента div с классом toast и button с toast-close.
Данные классы используются не только для оформления элементов, но и в коде JavaScript.
В CSS вышеприведённые классы применяются для привязки к HTML элементам следующих стилей:
/* CSS */ .toast { overflow: hidden; font-size: 0.875rem; background-color: rgba(255, 255, 255, 0.5); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.25rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); display: none; position: relative; padding: 0.75rem 2rem 0.75rem 0.75rem; overflow-wrap: break-word; word-break: break-word; } .toast__close { position: absolute; top: 0; right: 10px; padding: 0; background-color: transparent; border: 0; cursor: pointer; float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.6; appearance: button; margin: 0; font-family: inherit; border-radius: 0; }
Добавлять сообщения (HTML код) на страницу будем динамически (с помощью JavaScript).
Класс "toast__close" в JavaScript будем использовать в роли селектора для получения кнопки "Закрыть". Для данной кнопки добавим обработку события "click". В обработчике этого события напишем действия, при выполнении которых будет осуществляться закрытие (скрытие) этого сообщения.
По умолчанию всплывающие сообщения после добавления их на страницу не отображаются ("display: none"). Отображение сообщения выполняется посредством добавления к нему класса "toast_show".
/* CSS */ .toast_show { display: block; }
Для скрытия отображаемого сообщения у него просто необходимо удалить класс "toast_show".
Задание цвета всплывающему сообщению будем осуществлять посредством "инлайнового" (с помощью атрибута "style") добавления к элементу с классом "toast" CSS-свойства background-color.
<!-- HTML --> <div class="toast" style="background-color: rgba(255, 255, 255, 0.5);"> Текст сообщения... <button class="toast__close" type="button">×</button> </div>
Помещать создаваемые с помощью JavaScript всплывающие сообщения будем в контейнер (элемент) div с классом "toasts". Данный контейнер будем добавлять на страницу тоже с помощью JavaScript. Но осуществлять это будем только в том случае, если на странице его ещё нет.
HTML синтаксис контейнера:
<!-- HTML --> <div class="toasts" style="position: fixed; top: 15px; right: 15px; width: 250px;"></div>
Данный элемент по умолчанию настроен так, что он располагается в правом верхнем угла окна браузера и имеет ширину 250 пикселей. Если его нужно расположить в другом месте, то эти CSS свойства необходимо изменить в JavaScript.
Дополнительно в CSS добавим ещё следующий код. Он необходим для того чтобы задать отступ между сообщениями по вертикали.
.toast:not(:last-child) { margin-bottom: 0.75rem; }
Код JavaScript состоит из функции-конструктора Toast, методов show и hide, и двух статических функций create и add.
// код JavaScript // функция-конструктор Toast (для создания объектов Toast) var Toast = function (element, config) { // приватные переменные класса Toast var _this = this, _element = element, _config = { autohide: true, delay: 5000 }; // установление _config for (var prop in config) { _config[prop] = config[prop]; } // get-свойство element Object.defineProperty(this, 'element', { get: function () { return _element; } }); // get-свойство config Object.defineProperty(this, 'config', { get: function () { return _config; } }); // обработки события click (скрытие сообщения при нажатии на кнопку "Закрыть") _element.addEventListener('click', function (e) { if (e.target.classList.contains('toast__close')) { _this.hide(); } }); } // методы show и hide, описанные в прототипе объекта Toast Toast.prototype = { show: function () { var _this = this; this.element.classList.add('toast_show'); if (this.config.autohide) { setTimeout(function () { _this.hide(); }, this.config.delay) } }, hide: function () { this.element.classList.remove('toast_show'); } }; // статическая функция для Toast (используется для создания сообщения) Toast.create = function (text, color) { var fragment = document.createDocumentFragment(), toast = document.createElement('div'), toastClose = document.createElement('button'); toast.classList.add('toast'); toast.style.backgroundColor = 'rgba(' + parseInt(color.substr(1, 2), 16) + ',' + parseInt(color.substr(3, 2), 16) + ',' + parseInt(color.substr(5, 2), 16) + ',0.5)'; toast.textContent = text; toastClose.classList.add('toast__close'); toastClose.setAttribute('type', 'button'); toastClose.textContent = '×'; toast.appendChild(toastClose); fragment.appendChild(toast); return fragment; }; // статическая функция для Toast (используется для добавления сообщения на страницу) Toast.add = function (params) { var config = { header: 'Название заголовка', text: 'Текст сообщения...', color: '#ffffff', autohide: true, delay: 5000 }; if (params !== undefined) { for (var item in params) { config[item] = params[item]; } } if (!document.querySelector('.toasts')) { var container = document.createElement('div'); container.classList.add('toasts'); container.style.cssText = 'position: fixed; top: 15px; right: 15px; width: 250px;'; document.body.appendChild(container); } document.querySelector('.toasts').appendChild(Toast.create(config.text, config.color)); var toasts = document.querySelectorAll('.toast'); var toast = new Toast(toasts[toasts.length - 1], { autohide: config.autohide, delay: config.delay }); toast.show(); return toast; }
Создание сообщений и их отображение пользователю выполняется с помощью вызова статической функции add:
// JavaScript /* Параметры функции add: text (строка) - текст сообщения color (строка) - цвет в формате #rrggbb autohide (булево) - скрывать ли автоматически всплывающее сообщение delay (число) - количество миллисекунд, после которых сообщение будет автоматически скрыто */ Toast.add({ text: 'Текст сообщения...', color: '#dc3545', autohide: false });
Статическая функция add функции-конструктора Toast выполняет следующие действия:
- создаёт контейнер для сообщений (элемент "div" с классом "toasts") и добавляет его перед закрывающим тегом "body";
- добавляет в конец контейнера новое сообщение (toast) с помощью вызова статической функции
Toast.create()
; - создает объект "Toast" посредством вызова функции-конструктора "Toast" (
new Toast()
) и сохраняет ссылку на данный объект в переменную toast; - вызывает метод "show" объекта toast (данный метод включает отображения уже созданного с помощью
Toast.create()
всплывающего сообщения); - возвращает в качестве результата выполнения ссылку на созданный объект (toast).
Добавить звуковое оповещение можно так:
Пример со звуком можно посмотреть здесь.
Пример доступен по этой ссылке.
А возможно к Toast добавить ещё и звуковое оповещение?