Перейти к содержимому
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <div class="row mt-3"> <div class="col-4"> <img id="img-1" src="https://i.artfile.ru/6000x4000_1349302_[www.ArtFile.ru].jpg" alt="Скрипка" width="300" data-toggle="modal" data-target="#modal1"> </div> <div class="col-4"> <img id="img-2" src="https://top10.travel/wp-content/uploads/2014/12/hram-vasiliya-blazhennogo.jpg" alt="Достопримечательности" width="300" data-toggle="modal" data-target="#modal2"> </div> <div class="col-4"> <img id="img-3" src="https://img.championat.com/s/735x490/news/big/l/w/skvosh-triatlon-zorbing-chto-vybrat-v-2019_15488563261718964122.jpg" alt="Спорт" width="300" data-toggle="modal" data-target="#modal3"> </div> </div> <div class="modal fade" id="modal1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div></div> <h5 class="modal-title">Скрипка</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> </div> </div> </div> <div class="modal fade" id="modal2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div></div> <h5 class="modal-title">Достопримечательности</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> </div> </div> </div> <div class="modal fade" id="modal3"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div></div> <h5 class="modal-title">Спорт</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> </div> </div> </div>
$(document).ready(function(){ $("#img-1").click(function(){ $("#modal1").modal(); }); $("#img-2").click(function(){ $("#modal2").modal(); }); $("#img-3").click(function(){ $("#modal3").modal(); }); });
.modal-header { text-align: center; } .modal-header .close { padding: 0; margin: 0; }
Results:
Скрипка
×
Достопримечательности
×
Спорт
×
