Question

是否有其他方法可以根据触发按钮改变带有图片的模态？

如果我有包含图片的触发按钮：

 <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>

注意：我无法使用此行代码获取模态中的图片

是否有其他方法可以根据触发按钮改变带有图片的模态？

Answer 1

在我看来，你应该在页面的页脚中的某处声明你的模态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);

Jquery：如何根据触发按钮改变模态内容

1 个答案: