Существует множество способов оперативно уведомить пользователя и сфокусировать его внимание на важном контенте, начиная от обычных алертов в JavaScript и заканчивая модальными окнами. Вниманию читателя представляются простые, удобные и красивые всплывающие уведомления на CSS3 и JS (именуемые в англоязычной среде «CSS alerts»), которые фиксируются в верхней части экрана и могут быть использованы для отображения различных состояний — ошибки, успешного действия, информации или предупреждения. Алерты полностью адаптивны и работают во всех современных браузерах.
Уведомления «под капотом»
На просторах сети встречается большое количество скриптов и техник создания всплывающих уведомлений: алерты могут быть реализованы на «ванильном» JS, посредством плагинов JQuery и даже на чистом CSS3 с применением псевдокласса :target . Представленный в статье способ создания уведомлений классически совмещает обычный JS и CSS3, при этом алерты являются адаптивными, красиво выделяются и закрепляются в верхней части экрана, позволяют выводить как обычный текст, так и HTML, исчезают по истечению заданного времени и незначительно модифицируют DOM динамическим добавлением пары элементов в конец документа лишь на время исполнения функции и существования самого алерта.
HTML-разметка
Указанный HTML будет автоматически встраиваться перед закрывающим тегом
при вызове алерта. За определение состояний уведомлений отвечает атрибут data-type — этот селектор используется для соответствующего CSS-оформления. У алерта может быть четыре состояния (разумеется, при желании их можно дополнить): info — информационное уведомление, warn — предупреждение, success — оповещение об успешном действии и error — сообщение об ошибке.
Адаптивность уведомлений обеспечивается использованием относительных единиц. Все поля ( margin ) и отступы ( padding ) внутри алерта заданы в em, следовательно, зависят от размера шрифта, установленного для тела документа. Сам шрифт алертов и все его параметры так же наследуются от . Стандартная ширина уведомлений составляет половину viewport — 50vw . При этом, чтобы избежать излишнего «растягивания» на больших разрешениях экрана для уведомлений установлена максимальная ширина в 20em , а для маленьких — минимальные 75vw . Таким образом, алерты всегда будут гармонично «вписываться» в экран любого устройства.
Для большего визуального эффекта и выделения на фоне прочих элементов к уведомлениям с состоянием ошибки или предупреждения добавлена «трясущая» анимация:
Блоки с алертами существуют только указанное время, но их родительский элемент создается при первом запуске функции и остается в DOM-дереве. При желании он может быть скрыт, когда не задействован:
Функция вызова уведомлений принимает единственный аргумент — объект, содержащий предварительные настройки. В теле функции значение этих настроек устанавливается по умолчанию:
Уведомление генерируется по следующему принципу: при первом вызове в после всех дочерних элементов создаётся родительский блок ( #notes ), куда, в свою очередь, вставляется само уведомление ( .note-item ). По истечению заданного времени оно автоматически исчезает и удаляется из DOM. Создание и удаление уведомлений происходит с небольшой задержкой, необходимой для обеспечения CSS-переходов. При этом одновременно может быть выведено несколько алертов подряд: они автоматически сместятся вниз, а при вертикальном заполнении экрана начнут по очереди удаляться, чтобы освободить место новым.
Последующий вызов функции не отражается на родительском элементе #notes . При желании его можно скрыть указанным выше способом.
/** * Анонимная самовызывающаяся функция-обертка * @param d - получает документ */ !function(d) < "use strict"; /** * Основная функция. * @param [settings] - предвартиельные настройки */ window.note = function(settings) < /** * Настройки по умолчанию */ settings = Object.assign(<>,< callback: false, content: "", time: 4.5, type: "info" >, settings); if(!settings.content.length) return; /** * Функция создания элементов * @param name - название DOM-элемента * @param attr - объект с атрибутами * @param append - DOM-элемент, в который будет добавлен новый узел * @param [content] - контент DOM-элемента */ var create = function(name, attr, append, content) < var node = d.createElement(name); for(var val in attr) < if(attr.hasOwnProperty(val)) node.setAttribute(val, attr[val]); >if(content) node.insertAdjacentHTML("afterbegin", content); append.appendChild(node); if(node.classList.contains("note-item-hidden")) node.classList.remove("note-item-hidden"); return node; >; /** * Генерация элементов */ var noteBox = d.getElementById("notes") || create("div", < "id": "notes" >, d.body); var noteItem = create("div", < "class": "note-item", "data-show": "false", "role": "alert", "data-type": settings.type >, noteBox), noteItemText = create("div", < "class": "note-item-text" >, noteItem, settings.content), noteItemBtn = create("button", < "class": "note-item-btn", "type": "button", "aria-label": "Скрыть" >, noteItem); /** * Функция проверки видимости алерта во viewport * @returns */ var isVisible = function() < var coords = noteItem.getBoundingClientRect(); return ( coords.top >= 0 && coords.left >= 0 && coords.bottom ; /** * Функция удаления алертов * @param [el] - удаляемый алерт */ var remove = function(el) < el = el || noteItem; el.setAttribute("data-show","false"); window.setTimeout(function() < el.remove(); >, 250); if(settings.callback) settings.callback(); // callback >; /** * Удаление алерта по клику на кнопку */ noteItemBtn.addEventListener("click", function() < remove(); >); /** * Визуальный вывод алерта */ window.setTimeout(function() < noteItem.setAttribute("data-show","true"); >, 250); /** * Проверка видимости алерта и очистка места при необходимости */ if(!isVisible()) remove(noteBox.firstChild); /** * Автоматическое удаление алерта спустя заданное время */ window.setTimeout(remove, settings.time * 1000); >; >(document);
Использовать функцию достаточно легко. Так, например, на 15 секунд вызывается алерт, информирующий об ошибке:
Пример всплывающих уведомлений
Для правильной работы скрипта в браузере Internet Explorer 10+ для методов childNode.remove() и Object.assign() следует добавить полифиллы. Важный нюанс: если JS без проблем выполняется в старых браузерах, то с CSS3 не всё так однозначно: анимации и единицы vw поддерживаются не везде.
В заключение
Уведомления, как и всплывающие подсказки, являются универсальным способом вывести лаконичную информацию и обратить на нее внимание посетителя. Представленная техника создания так называемых «CSS alerts» удобна для использования на сайтах с адаптивным дизайном и не требует подключения сторонних JS-библиотек. Кроме того, скрипт может быть усовершенствован под любые потребности, например, возможностью установить позиционирование относительно страницы или добавлением к сообщениям различных иконок.
Всплывающие сообщения для сайта на чистом JavaScript
Всплывающие сообщения – это ненавязчивый способ показа сообщений для пользователя. Они позволяют отображать уведомления пользователю заметным образом и не мешая при этом его взаимодействию с сайтом или веб-приложением.
Проект, рассматриваемый в рамках этой статьи, расположен на Github по адресу: https://github.com/itchief/ui-components/tree/master/toast
Он написан на чистом JavaScript без использования сторонних библиотек.
По умолчанию всплывающие сообщения отображаются в правом верхнем углу. При этом они могут выводиться как с заголовком, так и без него.
Подключение и использование
Компонент для показа всплывающих уведомлений состоит из 2 файлов: «toast.css» и «toast.js». Преимуществом данной библиотеки состоит в том, что она имеет очень маленький размер («toast.min.js» немного больше 1Кбайта). В отличие от библиотеки jGrowl эти сообщения не требуют библиотеку jQuery, что для многих сайтов очень важно.
Подключение компонента осуществляется посредством:
Вывод всплывающего сообщения на страницу осуществляется посредством создания экземпляра объекта Toast :
/* title - название заголовка text - текст сообщения theme - тема autohide - нужно ли автоматически скрыть всплывающее сообщение через interval миллисекунд interval - количество миллисекунд через которые необходимо скрыть сообщение */ new Toast({ title: 'Заголовок', text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });
Если нужно создать сообщение без заголовка, то нужно просто ключу title установить значение false :
// без заголовка new Toast({ title: false, text: 'Сообщение. ', theme: 'light', autohide: true, interval: 10000 });
Подробное описание
Создание HTML кода всплывающих сообщений как с заголовком, так и без него выполняется в JavaScript. Целью является создание следующей структуры:
Сообщение.
Заголовок
Сообщение.
HTML код сообщений простой. Он состоит из элемента с классом toast , в котором в зависимости от типа уведомления расположены два или три элемента:
с классом toast__header — заголовок;
с классом toast__body — элемент, в котором выводится само сообщение;
с классом toast__close — кнопка, для закрытия сообщения.
С помощью классов в CSS добавляются стили к этим элементам:
Класс toast__close ещё используется в обработчике события click . При нажатии на эту кнопку выполняется закрытие сообщения.
this._el.addEventListener('click', (e) => { if (e.target.classList.contains('toast__close')) { // вызываем метод, скрывающий сообщение this._hide(); } });
После того как JavaScript добавляет HTML код всплывающего сообщения на страницу, оно не отображается, т.к. по умолчанию оно имеет display: none . Его показ осуществляется после того, как к нему добавляется класс toast_show .
.toast_show { display: block; }
Скрытие сообщения выполняется путём удаления класса toast_show .
Задание темы осуществляется посредством добавления класса.
Например, тема primary устанавливается так:
Помещение элементов .toast выполняется в контейнер .toast-container . Его создание тоже осуществляется с помощью JavaScript, но только в том случае, если его нет на странице.
if (!document.querySelector('.toast-container')) { const container = document.createElement('div'); container.classList.add('toast-container'); document.body.append(container); }
Данный элемент по умолчанию располагается в правом верхнем углу страницы и имеет ширину 270 пикселей. Если нужно расположить в другом месте, то измените стили.
