javascript - 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);