Почему не выводится модальное окно?

Question

Пишу веб-приложение, используя Spring Boot и Freemarker. Необходимо, чтобы при нажатии по кнопке, выводилось модальное окно. Для этого использую Jqueri.min.js и bootstrap.min.js, подключенные к html с помощью CDN. Ничего не работает, хотя код написан правильно. В источниках страницы при запуске проекта пишет, что данные ресурсы подключены. Что не так? Я новичок в этом, буду рад любой помощи.

<!DOCTYPE HTML>
<html lang="ru">

<head>
  <title>Кальян-Бар "Яма"</title>
  <meta charset="UTF-8">
</head>

<body>
  <h3>Создать товар</h3>
  <div class="create">
    <div class="create-product">
      <form action="/admin" method="post" enctype="multipart/form-data">
        Название категории: <input type="text" name="type" /><br><br> Название товара: <input type="text" name="name" /><br><br> Цена: <input type="text" name="price" /><br><br> Фото: <input type="file" name="file" /><br><br>
        <input type="submit" value="Добавить товар" />
      </form><br><br>
      <h3>Редактирование главной страницы</h3>
    </div>
    <div class="create-home">
      <form action="/home/edit/desEdit" method="post">
        Первый текст <textarea rows="10" cols="45" name="firstText">${description.firstText}</textarea> Второй текст <textarea rows="10" cols="45" name="secondText">${description.secondText}</textarea> Третий текст <textarea rows="10" cols="45" name="thirdText">${description.thirdText}</textarea><br><br>
        <input type="submit" value="Внести изменения">
      </form><br><br>
      <form action="/home/edit/imageEdit" method="post" enctype="multipart/form-data">
        1 линия <input type="file" name="file1" /> 2 линия <input type="file" name="file2" /> 3 линия <input type="file" name="file3" /><br><br> Нижняя линия с фотографиями <input type="file" name="fileLeft" />
        <input type="file" name="fileCentre" />
        <input type="file" name="fileRight" /><br><br>
        <input type="submit" value="Изменить фото">
      </form>
    </div>
  </div>
  <script src="/static/js/validate-script.js"></script>
  <h4>Панель администратора</h4>
  <table border="1">
    <tr>
      <th>Категория</th>
      <th>Название</th>
      <th>Цена</th>
      <th>Редактирование</th>
      <th>Удаление</th>
    </tr>
    <#list products as product>
      <tr>
        <th>${product.type}</th>
        <th>${product.name}</th>
        <th>${product.price}</th>
        <th><button class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">Редактировать</button></th>
        <th>
          <form action="/admin/delete/${product.id}" method="post">
            <input type="submit" value="Удалить" />
          </form>
        </th>
      </tr>
      <#else>
        <h3>Товаров нет</h3>
    </#list>
  </table>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">

        </div>
        <div class="modal-body">

        </div>
        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>

</html>

БЛОГ НА HUSL

Почему не выводится модальное окно?

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