html — Почему не выводится модальное окно?
Вопрос задан
Изменён 7 месяцев назад
Просмотрен 42 раза
Пишу веб-приложение, используя 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>
<h4>Создать товар</h4>
<div>
<div>
<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>
<h4>Редактирование главной страницы</h4>
</div>
<div>
<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>
<h5>Панель администратора</h5>
<table border="1">
<tr>
<th>Категория</th>
<th>Название</th>
<th>Цена</th>
<th>Редактирование</th>
<th>Удаление</th>
</tr>
<#list products as product>
<tr>
<th>${product.
(adsbygoogle = window.adsbygoogle || []).push({});
Что делать если не работает модельное окно bootstarp. Я приведу несколько простых примеров и расскажу о модальном окне в целом.
bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Модальное окно</title>
</head>
<body>
</body>
</html>
js"></script>
<title>Модальное окно</title>
</head>
<body>
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div role="document">
<div>
<div>
<h5>Заголовок модального окна</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
<iframe" src="https://www.youtube.com/embed/EgImRV_h5dc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div>
<button type="button" data-dismiss="modal">Закрыть</button>
<button type="button">Сохранить</button>
</div>
</div>
</div>
</div>
<div>
<a href="/" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</a>
</div>
</body>
</html>
В следующем примере убедимся в этом.
ru/wp-content/uploads/2017/09/interfeis-redactora-notepad.png" alt="Первый слайд">
</div>
<div>
<img src="https://abuzov.ru/wp-content/uploads/2018/01/modalnoe-okno-bootstrap-300x132.png"lt="Второй слайд">
</div>
<div>
<img src="https://abuzov.ru/wp-content/uploads/2017/12/krasnoukhaua-cherepaha-300x225.jpg" alt="Третий слайд">
</div>
</div>
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<span aria-hidden="true"></span>
<span>Previous</span>
</a>
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<span aria-hidden="true"></span>
<span>Next</span>
</a>
</div>
</div>
<div>
<button type="button" data-dismiss="modal">Закрыть</button>
<button type="button">Сохранить</button>
</div>
</div>
</div>
</div>
<div>
<a href="/" data-toggle="modal" data-target="#exampleModalLive">
Открыть модальное окно
</a>
</div>
</body>
</html>
