JQuery: Как изменить модальное содержимое на основе кнопки триггера
Есть ли другой способ изменить модальное изображение с помощью кнопки запуска?
Если у меня есть кнопка запуска, которая содержит изображение:
<button type="button" data-toggle="modal" data-target="#ViewModal" data-picture="<?php echo $user->getPicture(); ?>"></button>
Как лучше всего выбрать и показать картинку на модале?
Это мое поле изображения в этом модале:
<div class="modal-body">
<center>
<img src="**(SHOULD I PUT THE PICTURE IN HERE?)**" name="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
И это JavaScript, который обрабатывает модальные:
<script type="text/javascript">
$('#ViewModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var picture = button.data('picture')
var modal = $(this)
modal.find('.modal-body img[name="picture"]').val(picture)
})
</script>
Примечание: я не могу получить изображение в модальном с этой строкой кода
Есть ли другой способ изменить модальное изображение с помощью кнопки запуска?
Решение
По моему мнению, вы должны объявить свой модальный html где-нибудь в нижнем колонтитуле страницы, чтобы иметь больше контроля и удобство в отображении вашего изображения.
<div class="modal fade" id="my_image" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="" id="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
</div>
</div>
</div>
И тогда вы просто измените атрибут src элемента изображения из вашей функции.
var picture = button.data('picture')
$('#picture').attr('src',picture);
Другие решения
Других решений пока нет …