Как создать toast со своим текстом bootstrap 5?

Question

[Georgi]

Добрый вечер. На сайте https://getbootstrap.com/docs/5.0/components/toasts/ в примерах показаны заранее созданные контейнеры для всплывающих уведомлений и вызовы их при нажатии на кнопку и событие.

Но можно ли создавать их посредством js? Например notification('Тестовое уведомление');

Если как-то создать функцию:

function notification (text) {
	var toastElList = [].slice.call(document.querySelectorAll('.toast'))
	var toastList = toastElList.map(function(toastEl) {
		return new bootstrap.Toast(toastEl);
	});
	
	toastList.forEach(toast => toast.show());
}

Answer 1

[Stanislav]

function showToast (text) {
  let toastContainer = document.getElementById('toast-container');

  let toastEl = document.createElement('div');
  toastEl.classList.add('toast');
  toastEl.setAttribute('role', 'alert');
  toastEl.setAttribute('aria-live', 'assertive');
  toastEl.setAttribute('aria-atomic', 'true');

  let toastBody = document.createElement('div');
  toastBody.classList.add('toast-body');
  toastBody.innerText = text;

  toastEl.appendChild(toastBody);
  toastContainer.appendChild(toastEl);

  let bootstrapToast = new bootstrap.Toast(toastEl);
  bootstrapToast.show();
}

<div id="toast-container" aria-live="polite" aria-atomic="true"></div>

Comments

[Georgi]

Спасибо Вам большое. Все отлично работает

[Georgi]

Станислав, Вы не подскажите - в bootstrap 5 Toast можно включить html? вставляет теги как текст)

[Stanislav]

Georgi, Да, используйте метод innerHTML вместо innerText

[Georgi]

Stanislav, Спасибо большое)