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

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

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

Что такое Bootstrap Alerts?

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

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

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

<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:

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

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

<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 значками:

<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 спрайт, а затем просто на них ссылаться:

<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 при созданий иконок.

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

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

<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-файл этой библиотеки к странице:

<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 это выполняется так:

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

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

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

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

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

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

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

<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 секунд после загрузки страницы:

<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>
Пример, в котором уведомление на Bootstrap закрывается через 10 секунд после загрузки страницы

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

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

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

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

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

// получим элемент, являющийся 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>`);
});

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

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

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

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();
Уведомление на Bootstrap о том, что сайт использует куки

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

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

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

  1. Анатолий
    Анатолий
    2020-12-07 17:40:19
    Делаю автоматическое закрытие алертов скриптом из вашего примера:
    setTimeout(function() {
      $('#my-alert').alert('close');
    },5000);
    Однако алерт закрывается только 1 раз. Если вызвать алерт второй раз, то он не закроется (нужно обновлять страницу). Но у меня на странице можно многократно вызывать это сообщение и нужно чтобы оно всегда само закрывалось. Как мне быть, подскажите пожалуйста.
  1. Александр Мальцев
    Александр Мальцев
    2020-12-08 16:30:41
    Для этого код необходимо оформить в виде функции и вызывать её после добавления уведомления на страницу.
  • D2207
    D2207
    2020-08-14 20:48:12
    Не могу понять, как надо использовать эти уведомления. Написал код, он есть на странице. Закрывается по крестику. Имеет ссылки, иконки. Но как его привязать к событию? Например, при клике по кнопке. Как добавить в функцию onClick уведомление?
    1. Александр Мальцев
      Александр Мальцев
      2020-08-17 04:31:21
      В этом случае уведомления удобней конструировать с помощью JavaScript, а затем добавлять их в нужное место на странице. Пример программного создания уведомлений.
  • Андрей
    Андрей
    2018-09-26 10:35:46
    Как на Bootstrap 3 сделать кнопку больше не показывать?
    1. Александр Мальцев
      Александр Мальцев
      2018-09-26 16:00:05
      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
  • Сергей
    Сергей
    2015-08-11 19:57:26
    Валидаторы выдают предупреждения на CSS и JS файлы Bootstrap при их подключении. Хотя браузеры отображают страницы вроде корректно. Это я что-то «начудил» у себя, или у всех так?
    1. Александр Мальцев
      Александр Мальцев
      2015-08-12 15:16:33
      А что за валидатор? Они обычно описывают ошибки.
  • Сергей
    Сергей
    2015-08-11 19:53:08
    Корректен ли мой вариант закрытия сообщений с помощью 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>
    1. Александр Мальцев
      Александр Мальцев
      2015-08-12 15:00:41
      Сергей, более корректно метод alert('close') вызывать не для самой кнопки, а для элемента с классом alert:
      $('.close').click(function() {
        $(this).parent('.close').alert('close');
      });