Bootstrap Изменяющееся модальное содержимое - PullRequest
0 голосов
/ 26 мая 2020
• 1000 В качестве альтернативы, есть ли способ настроить таргетинг на теги h3 и P внутри ссылки для получения информации или добавление атрибутов данных к каждой ссылке - лучший метод? (Извините, мои JS знания невелики)

Ссылка

<a data-desc="this is a test" data-image="/build/images/app-icons/slack.svg" data-title="Slack 3" data-target="#appListModal" data-toggle="modal" href="">
<div class="media">
<img alt="Generic placeholder image" class="mr-3 app-icon" id="a-icon" src="/build/images/app-icons/slack.svg">
<div class="media-body">
  <h3 class="mt-0" id="app-title">Slack</h3>
  <p>Team and client communication</p>
</div>
</div>
</a>

Модальное тело

<div class="modal-body">
    <img class="modal-icon" id="app-icon" src="/build/images/app-icons/slack.svg">
    <h3 class="modal-title">Slack</h3>
    <p class="modal-desc">Team and client communication</p><button class="btn" type="button"><span class="align-middle"><img class="tag-icon" src="/build/images/app-icons/link.svg">Visit website</span></button> <button class="btn" type="button"><span class="align-middle"><img class="tag-icon" src="/build/images/app-icons/play.svg">View Tutorial</span></button>
</div>

JS

$('#appListModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var apptitle = button.data('title')
var appdesc = button.data('desc')
var image = button.data('image')

// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(apptitle)
modal.find('.modal-desc').text(appdesc)
modal.find('.modal-icon').src = (image)   })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...