Перейти к содержимому
MihailKuznetsow
Главная
Направление
Учебные задания
Web-программирование
HTML
JS Аккордеоны
JS Вкладки
PHP
Новости
MihailKuznetsow
Меню навигации
Меню навигации
Главная
Направление
Учебные задания
Web-программирование
HTML
JS Аккордеоны
JS Вкладки
PHP
Новости
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Модальные окна с изображениями</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <div class="row mt-3"> <div class="col-4"> <img id="Скрипка" src="https://i.artfile.ru/6000x4000_1349302_[www.ArtFile.ru].jpg" alt="Скрипка" width="300" class="img-fluid" data-toggle="modal" data-target="#modalViolin"> </div> <div class="col-4"> <img id="Церковь" src="https://top10.travel/wp-content/uploads/2014/12/hram-vasiliya-blazhennogo.jpg" alt="Церковь" width="300" class="img-fluid" data-toggle="modal" data-target="#modalChurch"> </div> <div class="col-4"> <img id="Спорт" src="https://img.championat.com/s/735x490/news/big/l/w/skvosh-triatlon-zorbing-chto-vybrat-v-2019_15488563261718964122.jpg" alt="Спорт" width="300" class="img-fluid" data-toggle="modal" data-target="#modalSport"> </div> </div> </div> <!-- Модальное окно для Скрипки --> <div class="modal fade" id="modalViolin" tabindex="-1" role="dialog" aria-labelledby="modalViolinLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalViolinLabel">Скрипка</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Это изображение скрипки. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <!-- Модальное окно для Церкви --> <div class="modal fade" id="modalChurch" tabindex="-1" role="dialog" aria-labelledby="modalChurchLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalChurchLabel">Церковь</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Это изображение церкви. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <!-- Модальное окно для Спорта --> <div class="modal fade" id="modalSport" tabindex="-1" role="dialog" aria-labelledby="modalSportLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalSportLabel">Спорт</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Это изображение спорта. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> </body> </html>
Results:
Модальные окна с изображениями
Скрипка
×
Это изображение скрипки.
Церковь
×
Это изображение церкви.
Спорт
×
Это изображение спорта.
