当我打开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">×</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);
});
});
答案 0 :(得分:0)
您可以在模式中创建示例p
元素,然后使用text()
函数从alt
属性向该元素添加文本。
HTML:
<div id="myModal2" class="modal fade" role="dialog">
<span id="close" data-dismiss="modal">×</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'));
});
});