Создание уведомлений с помощью Bootstrap Alerts

Создание уведомлений с помощью Bootstrap Alerts
Содержание:
  1. Что такое Bootstrap Alerts?
  2. Создание уведомлений
  3. Уведомления с иконками
  4. Кнопка для закрытия уведомления
  5. Программное закрытие уведомлений
  6. События при закрытии уведомления
  7. Примеры кастомных уведомлений
  8. Комментарии

В этой статье мы изучим процесс создания уведомлений с помощью компонента Bootstrap Alerts. В практической части разберём как установить им определённый цвет, кнопку для закрытия и многое другое.

Что такое Bootstrap Alerts?

Alerts – это простой CSS компонент библиотеки Bootstrap для создания на сайте уведомлений. В основном они применяются для вывода уведомлений на различные действия пользователей. Например, их очень часто используют для отображения ошибок при проверке формы, а также для вывода уведомлений об успешной её отправки.

Создание уведомлений

Создание уведомлений в Bootstrap выполняется очень просто: посредством оборачивания необходимого сообщения в <div> и добавления к нему двух классов alert и alert-primary:

HTML
<div class="alert alert-primary" role="alert">
  Уведомление, имеющее тему alert-primary!
</div>

К этому уведомлению применена тема alert-primary. Кроме неё доступны ещё следующие:

  • alert-secondary;
  • alert-success;
  • alert-danger;
  • alert-warning;
  • alert-info;
  • alert-light;
  • alert-dark.
Вид уведомлений компонента Bootstrap Alerts

Демо

При этом не все эти темы имеются в каждой версии Bootstrap. Например, в Bootstrap 3 доступны только четыре темы: alert-success, alert-info, alert-warning и alert-danger.

Стилизация ссылок внутри уведомлений осуществляется с помощью класса alert-link:

HTML
<div class="alert alert-primary" role="alert">
  Уведомление со <a href="#" class="alert-link">ссылкой</a>!
</div>
Вид уведомлений Bootstrap Alerts со ссылками

При создании уведомлений можно использовать дополнительные элементы, такие как заголовки, параграф <p> и горизонтальную линию <hr>:

HTML
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Далеко-далеко</h4>
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.</p>
  <hr>
  <p class="mb-0">Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
</div>
Уведомление Bootstrap Alert,   содержащее дополнительные элементы такие как заголовок, параграф и горизонтальную линию

Уведомления с иконками

Для создания уведомлений с иконками можно воспользоваться утилитными классами Bootstrap для Flexbox и SVG значками:

HTML
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    Уведомление с иконкой
  </div>
</div>
Уведомление Bootstrap Alert с SVG иконкой

Для показа уведомлений с разными значками, можно из них создать локальный SVG спрайт, а затем просто на них ссылаться:

HTML
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    Уведомление с иконкой
  </div>
</div>
Пример создания уведомлений в Bootstrap с разными значками, которые берутся из локального SVG спрайта

В этом примере мы значкам в SVG спрайте присваиваем разные id, на которые затем ссылаемся через xlink:href при созданий иконок.

Кнопка для закрытия уведомления

К уведомлению можно добавить кнопку для его закрытия:

HTML
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Уведомление, которое можно закрыть, нажав на крестик!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Уведомление Bootstrap Alert, которое можно закрыть

Для этого необходимо:

  • добавить класс alert-dismissible;
  • поместить в Alert тег <button> и добавить к нему атрибуты: class="btn-close" и data-bs-dismiss="alert" (до Bootstrap 5: class="close" и data-dismiss="alert");
  • при необходимости можно добавить классы fade и show, чтобы процесс закрытия выполнялся с анимацией.

Закрытие уведомлений в Bootstrap осуществляется с помощью JavaScript. Поэтому необходимо подключить js-файл этой библиотеки к странице:

HTML
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Класс alert-bs-dismissible используется для того, чтобы добавить дополнительный отступ справа и задать положение кнопки «Закрыть».

Атрибут data-bs-dismiss="alert" (в Bootstrap до 5 версии он называется data-dismiss) выступает в качестве селектора, к которому привязан некоторый код JavaScript. При клике он выполняется и удаляет соответствующее уведомление.

Программное закрытие уведомлений

Закрыть уведомление можно также программно, с помощью кода JavaScript. В Bootstrap 5 это выполняется так:

JavaScript
// получаем экземпляр Alert, связанный с элементом #myAlert
const bsAlert = bootstrap.Alert.getOrCreateInstance('#myAlert');
// закрываем уведомление
bsAlert.close();

В этом коде getOrCreateInstance() – это статический метод bootstrap.Alert. Возвращает он экземпляр Alert, связанный с указанный элементом. Если его нет, то создаёт новый и возвращает его в качестве результата.

По сути, он делает следующее:

JavaScript
// получаем экземпляр Alert связанный с элементом bsAlert
let bsAlert = bootstrap.Alert.getInstance('#my-alert')
// если его нет
if (!bsAlert) {
  // то создаем новый экземпляр Alert с помощью конструктора bootstrap.Alert
  bsAlert = new bootstrap.Alert('#my-alert')
}

В Bootstrap до 5 версии это осуществляется так:

JavaScript
$('#my-alert').alert('close');

В следующем примере выведем уведомление внизу экрана через 10 секунд после загрузки страницы:

HTML
<div id="bottom-alert" class="alert alert-warning alert-dismissible fade"
  style="position: fixed; bottom: 15px; left: 0; right: 0; max-width: 360px; margin: 0 auto;">Уведомление внизу
  экрана!<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      document.querySelector('#bottom-alert').classList.add('show');
    }, 10000);
  });
</script>
Пример, в котором уведомление на Bootstrap показывается через 10 секунд после загрузки страницы

В этом примере автоматически закроем уведомление через 10 секунд после загрузки страницы:

HTML
<div id="top-alert" class="alert alert-warning alert-dismissible fade show">
  Уведомление вверху экрана!
</div>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      const alert = bootstrap.Alert.getOrCreateInstance('#top-alert');
      alert.close();
    }, 10000);
  });
</script>
HTML
Пример, в котором уведомление на Bootstrap закрывается через 10 секунд после загрузки страницы

В примере, приведенном выше, вызов функции, выполняющей указанные действия, осуществляется через 10 секунд с помощью метода setTimeout().

События при закрытии уведомления

При закрытии Alert возникают следующие события:

  • close.bs.alert – при закрытии;
  • closed.bs.alert – после закрытия, когда CSS-переходы завершены.

Выведем названия событий после закрытия уведомления в порядке их возникновения на экран:

HTML
// получим элемент, являющийся Alert
const myAlert = document.querySelector('.alert');
// добавим обработчик события close.bs.alert
myAlert.addEventListener('close.bs.alert', () => {
  document.querySelector('#result').insertAdjacentHTML('beforeend', `<li>close.bs.alert</li>`);
});
// добавим обработчик события closed.bs.alert
myAlert.addEventListener('closed.bs.alert', () => {
  document.querySelector('#result').insertAdjacentHTML('beforeend', `<li>closed.bs.alert</li>`);
});
HTML

В этом коде для задания обработчиков событиям используется метод addEventListener().

Порядок возникновения Bootstrap событий после закрытия уведомления

После загрузки страницы отобразим предупреждение о том, что сайт использует куки. После получения согласия, сохраним запись об этом в LocalStorage. Затем показывать это уведомление данному пользователю больше не будем:

HTML
const cookieAlert = {
  show() {
    const html = `<div id="cookie-alert" class="alert alert-warning alert-dismissible fade show" style="position: fixed; bottom: 20px; left: 0; right: 0; max-width: 360px; margin: 0 auto;"><p><strong>Мы используем куки</strong>, потому что без них вообще ничего не работает.</p><div class="text-center"><button type="button" class="btn btn-secondary" data-bs-dismiss="alert">Хорошо</button></div></div>`
    document.body.insertAdjacentHTML('beforeend', html);
  },
  init() {
    if (!localStorage.getItem('cookie-alert')) {
      this.show();
      const el = document.querySelector('#cookie-alert');
      el.addEventListener('closed.bs.alert', e => {
        localStorage.setItem('cookie-alert', 1);
      });
    }
  }
}
cookieAlert.init();
HTML
Уведомление на Bootstrap о том, что сайт использует куки

В этом примере для вставки строки как HTML используется метод insertAdjacentHTML().

Примеры кастомных уведомлений

1. Уведомление с иконкой, которое построено с помощью CSS Flexbox. Иконка отображается слева от сообщения. В качестве иконок используются значки из бесплатной коллекции Font Awesome 5:

Кастомное уведомление на Bootstrap с иконкой

Посмотреть

2. С большими иконками:

Кастомное уведомление на Bootstrap с большой иконкой

Посмотреть

3. С иконкой и стрелочкой:

Кастомное уведомление на Bootstrap с иконкой и стрелочкой

Посмотреть

Комментарии: 15

Анатолий
Анатолий
Делаю автоматическое закрытие алертов скриптом из вашего примера:
setTimeout(function() {
  $('#my-alert').alert('close');
},5000);
Однако алерт закрывается только 1 раз. Если вызвать алерт второй раз, то он не закроется (нужно обновлять страницу). Но у меня на странице можно многократно вызывать это сообщение и нужно чтобы оно всегда само закрывалось. Как мне быть, подскажите пожалуйста.
Александр Мальцев
Александр Мальцев
Для этого код необходимо оформить в виде функции и вызывать её после добавления уведомления на страницу.
D2207
D2207
Не могу понять, как надо использовать эти уведомления. Написал код, он есть на странице. Закрывается по крестику. Имеет ссылки, иконки. Но как его привязать к событию? Например, при клике по кнопке. Как добавить в функцию onClick уведомление?
Александр Мальцев
Александр Мальцев
В этом случае уведомления удобней конструировать с помощью JavaScript, а затем добавлять их в нужное место на странице. Пример программного создания уведомлений.
Ruslan
Ruslan
Добрый день Александр, не подскажите можно как то реализовать такое уведомление только чтобы при клике на кнопку, содержание сообщения менялось на соответствующую информацию с кнопки?
Александр Мальцев
Александр Мальцев
Добрый день! Информацию, например, можно сохранять в data-message:
<button type="button" class="btn btn-primary" data-create="message" data-message="Сообщение 1...">Создать сообщение 1</button>
А затем при клике по кнопке читать её оттуда и показывать в сообщение (открыть пример).
Ruslan
Ruslan
Здравствуйте Александр!
Спасибо что ответили на комментарий, подскажите пожалуйста, не пойму как это реализовать с одной кнопкой. Например есть кнопка подписаться/отписаться, и при клике выдавать соответствующее сообщение. Спасибо за обратную связь!
Александр Мальцев
Александр Мальцев
Привет!
Например, можно сделать так.
Ruslan
Ruslan
Благодарю, за помощь!
Андрей
Андрей
Как на Bootstrap 3 сделать кнопку больше не показывать?
Александр Мальцев
Александр Мальцев
HTML-код уведомления с кнопкой «Больше не показывать»:
<div id="alert" class="alert alert-info hide" style="overflow: hidden;">
  <p style="margin-bottom: 24px;">Уведомление, которое можно закрыть!</p>
  <button type="button" class="btn btn-info pull-right" data-dismiss="alert">Больше не показывать</button>
</div>
Скрипт, который будет сохранять состояние в Local Strorage:
if (!localStorage.getItem('alert')) {
  $('#alert').removeClass('hide');
  $('#alert').on('closed.bs.alert', function() {
    localStorage.setItem('alert', 1);
  });
}
Посмотреть: alerts-15
Аноним
Аноним
Валидаторы выдают предупреждения на CSS и JS файлы Bootstrap при их подключении. Хотя браузеры отображают страницы вроде корректно. Это я что-то «начудил» у себя, или у всех так?
Александр Мальцев
Александр Мальцев
А что за валидатор? Они обычно описывают ошибки.
Аноним
Аноним
Корректен ли мой вариант закрытия сообщений с помощью javaScript:
<h4>Сообщения, для закрытия которых используется метод alert('close')</h4>
<div class="alert alert-success">
  <span class="close">×</span>
  Ваше действие выполнено успешно.
</div>
<div class="alert alert-warning">
  <span class="close">×</span>
  <strong>Предупреждение!</strong> Обнаружены проблемы с сетевым подключением.
</div>
<script>
  $('.close').click(function(){$(this).alert('close');});
</script><code>
Александр Мальцев
Александр Мальцев
Сергей, более корректно метод alert('close') вызывать не для самой кнопки, а для элемента с классом alert:
$('.close').click(function() {
  $(this).parent('.close').alert('close');
});