Для активации уведомлений в Bootstrap 4, вы можете использовать классы alert
и alert-dismissible
.
1. Добавьте контейнер для уведомления в ваш HTML-файл, используя следующую структуру:
<div class="alert alert-dismissible fade show" role="alert"> <!-- Содержимое уведомления --> <button type="button" class="close" data-dismiss="alert" aria-label="Закрыть"> <span aria-hidden="true">×</span> </button> </div>
2. Внутри контейнера alert
вы можете добавить свое собственное содержание уведомления.
3. Класс alert-dismissible
добавляет кнопку закрытия с иконкой "x" в уведомление, что позволяет пользователю закрыть уведомление по его желанию.
4. Класс fade
добавляет плавное появление и исчезновение уведомления. Если вы не хотите, чтобы уведомление появлялось и исчезало плавно, вы можете удалить его.
5. role="alert"
добавляет роль "alert" для доступности.
Чтобы активировать уведомление программно с помощью JavaScript, вы можете использовать функцию alert()
с добавлением или удалением указанных классов для показа и скрытия уведомления, как показано ниже:
function showNotification() { var notification = document.querySelector('.alert'); notification.classList.add('show'); } function hideNotification() { var notification = document.querySelector('.alert'); notification.classList.remove('show'); }
В функции showNotification()
мы добавляем класс show
к элементу уведомления для его отображения, а в функции hideNotification()
мы удаляем класс show
для его скрытия.
Надеюсь, это поможет вам активировать уведомления Bootstrap 4! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.