[英]twitter bootstrap modal not displaying remote image
我正在使用twitter bootstrap的模态窗口来加载远程图像
<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a>
我正在关注这些文档
图像在模态中无法正确渲染。
我得到了大量混乱的数据 -
发生了什么? 我该怎么办?
是的,我也有这个。 我找到的答案就在这里 。
我创建了一个这样的链接:
<a href="gallery/blue.jpg" class="thumbnail img_modal">
//handler for link
$('.img_modal').on('click', function(e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$('#modal').modal('show');
});
//and modal code here
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
当使用href为模态指定远程内容时,Bootstrap使用jQuery的加载方法来获取内容,然后将检索到的内容粘贴到模态的body元素中。 简而言之,只有在远程内容(href值)加载HTML或文本时才有意义。
您所看到的是预期的,因为如果您在文本编辑器中打开gif文件并将其粘贴到HTML标记中,就会发生同样的事情。
为了让它按照您想要的方式工作,href需要指向一个HTML文档,其中包含一个<img>标记,该标记引用了模式中所需的图像。
在Mark Robson的帖子中 - 将'this'更改为'this.href':
$("#modal_img_target").attr("src", this);
=>
$("#modal_img_target").attr("src", this.href);
(我没有评论的声誉)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.