Сделать изображение, открывающее модал по клику?

Question

Изображения находятся в <div>, но при нажатии на одно из них появляется отдельный модал, отображающий информацию о div, на который был нажат. У моделей есть идентификатор или класс, подобный modal4
Это моя попытка:

<image type="image" src="Images/Drake.jpg"  data-target="modal" data-toggle="#modal4" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px"/> </a>

Вот мой модальный код:

 <div class="modal" id="Modal4" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title">Aubrey Drake "Drizzy" Graham</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

</div>
  </div>
</div>

Answer 1

Может быть потому, что вы ссылаетесь на модальный идентификатор во всех нижних регистрах в теге изображения, в то время как фактический модальный идентификатор имеет верхний регистр M ?

В теге img: data-toggle="#modal4"

В модальном объявлении: id="Modal4"

, чтобы быть уверенными в совпадении с регистрами везде.

Answer 2

Ваш data-target должен быть равен #Modal4, а ваш data-toggle должен быть равен modal

data-target="#Modal4" data-toggle="modal"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<image src="https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png" data-target="#Modal4" data-toggle="modal" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px"/></a>
 
<div class="modal" id="Modal4" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Aubrey Drake "Drizzy" Graham</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          SOMETHING
      </div>
  </div>
</div>

Answer 3

Вы можете сделать это в кнопке или в:

   <button type="button" class="btn  btn-outline-success" data-toggle="modal" data-target="#Modal4">
            <image type="image" src="images/windows-photo.jpg"  style="width:130px;height:140px;margin-left:10px;margin-bottom:10px" />   
      </button>
    <a href="#"   data-toggle="modal" data-target="#Modal4">
        <image type="image" src="images/windows-photo.jpg" style="width:130px;height:140px;margin-left:10px;margin-bottom:10px" />
    </a>