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

Статья, в которой рассмотрим, как можно самостоятельно создать для сайта всплывающие сообщения (уведомления) подобно тому, как это выполняет 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">&times;</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">&times;</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).