Как мне вывести динамически тест в модальное окно

Добры день я в js и jQwery новичкек поэтому не могу понять как мне вывести динамически тест в модальное окно.У меня есть картинки и к каждой свой текст .Картинки до меня уже выводятся через Fancybox но код там глобальный и я не хочу там-то то менять поскольку от туда тянется инфо на другие страницы. Поэтому я хочу создать для теста другое модальное окно я его создала и оно запускается только теперь не знаю как туда мне вставлять динамично тест когда нажимаю на этот же сокращенный тест над картинкой (стиль прописала как у кнопки и когда нажимаю по идеи должна появляться модальное окно с полным текстом к этой картинке)

            {% if picture.content_type == "image/jpeg" %}
                  <div class="col-xs-12 col-sm-4 col-lg-3" style=" mso-hide: all">
                      <div class="image-gallery">
                          <a data-fancybox="gallery" data-fancybox-title="{{ picture.description }}" data-toggle="modal" data-target="#exampleModal" data-title="{{picture.description}}"  href="{{ picture.url }}">
                            <img class="image-gallery-item mCS_img_loaded" data-toggle="modal" data-target="#exampleModal" data-title="{{picture.description}}" style="max-width: 100%; max-height: 100%;" src="{{ picture.url }}">
                          </a>

                          {% if picture.description %}
                          <span data-fancybox-title="{{ picture.description }}">{{picture.description}}</span>
                          {% endif %}
                      </div>
                  </div>
               
              {% endif %}


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</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 id="modalText"></div>



            {{ picture.description }}

      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" style="background-color: #18ADA1; color: #fff; border-radius: 50px; border-color: transparent; border: 1px solid transparent; min-width: 88px; height:32px;cursor: pointer; font: 15px 'Roboto', Helvetica, sans-serif;">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>

Подскажите пожалуйста как мне вывести тест

Вернуться на верх