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>

Примечание: я не могу получить изображение в модальном с этой строкой кода

Есть ли другой способ изменить модальное изображение с помощью кнопки запуска?

2

Решение

По моему мнению, вы должны объявить свой модальный 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);
1

Другие решения

Других решений пока нет …