Не работает код BS5 Toast

Question

Изучаю веб разработку, осваивая Bootstrap, наткнулся на трудности, именно не отображается компонент toast, хотя код копирую с оф сайта. Библиотека подключена, JS код, что на сайте указывают, добавил. Код ниже.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>

  <button type="button" class="btn btn-primary" id="liveToastBtn">Показать лайв тосты</button>

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
    <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 мин назад</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
      </div>
      <div class="toast-body">
        Привет, мир! Это тост-сообщение.
      </div>
    </div>
  </div>-

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  <script>
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      return new bootstrap.Toast(toastEl, option)
    })
  </script>


</body>

</html>

Answer 1

Сори если что не так, себя гуру в JS не считаю. Поэтому надеюсь на критику:) Вобщем нашел такое решение:

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
    <div id="liveToast" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 мин назад</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
      </div>
      <div class="toast-body">
        Привет, мир! Это тост-сообщение.
      </div>
    </div>
  </div>

Тоесть вместо

<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">

пишем

<div id="liveToast" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">

скрипт ставим свой

<script>
$(.toast .btn-close).on('click', function () {
    $(this).parent().parent().hide()
})
</scipt>

Итого должно выйти такое чудо:)

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>

  <button type="button" class="btn btn-primary" id="liveToastBtn">Показать лайв тосты</button>

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
    <div id="liveToast" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 мин назад</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
      </div>
      <div class="toast-body">
        Привет, мир! Это тост-сообщение.
      </div>
    </div>
  </div>-

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  <script>
    $(.toast .btn-close).on('click', function () {
        $(this).parent().parent().hide()
    })
  </script>


</body>

</html>

БЛОГ НА HUSL

Не работает код BS5 Toast

Ответы (1 шт):