我想在打开框模式时在图像下显示alt属性

时间:2017-05-19 00:16:33

标签: php mysql twitter-bootstrap

当我打开box模式时,我希望在图像下显示alt属性,我从mysql调用图像 php代码:

while ($row = mysqli_fetch_array($result)) {
    <img  id="'.$row['id'].'" data-toggle="modal" data-target="#myModal2" 
     alt='.$row['caption'].' src = "data:image;base64,'.$row['image'].'" 
     style="width:100%">
    <h5 data-toggle="modal" data-target="#myModal2">'.$row['caption'].'</h5>

HTML代码:

<div id="myModal2" class="modal fade" role="dialog">
 <span id="close" data-dismiss="modal">&times;</span>
    <div class="modal-content">
    <img class="img-responsive " src=""/>
    </div> 
    </div>

JavaScript代码:

$(document).ready(function () {
    $('#myModal2').on('show.bs.modal', function (e) {
        var image = $(e.relatedTarget).attr('src');
        $(".img-responsive").attr("src",image);
    });
  });

1 个答案:

答案 0 :(得分:0)

您可以在模式中创建示例p元素,然后使用text()函数从alt属性向该元素添加文本。

HTML:

<div id="myModal2" class="modal fade" role="dialog">
 <span id="close" data-dismiss="modal">&times;</span>
  <div class="modal-content">
    <img class="img-responsive " src=""/>
    <p></p>
  </div> 
</div>

JS:

$(document).ready(function () {
  $('#myModal2').on('show.bs.modal', function (e) {
    var image = $(e.relatedTarget).attr('src');
    $(".img-responsive").attr("src",image);
    $("#myModal2 p").text($(e.relatedTarget).attr('alt'));
  });
});