twitter bootstrap模式不显示远程图像

时间:2012-10-02 16:29:44

标签: javascript ajax twitter-bootstrap modal-dialog

我正在使用twitter bootstrap的模态窗口来加载远程图像

<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a>

我是following these docs

图像在模态中无法正确渲染。

我得到了大量混乱的数据 -

twitter bootstrap is not great

发生了什么事?我该如何解决?

3 个答案:

答案 0 :(得分:4)

是的,我也有这个。我找到的答案是here

我创建了一个这样的链接:

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

答案 1 :(得分:3)

当使用href指定模态的远程内容时,Bootstrap使用jQuery的加载方法来获取内容,然后将检索到的内容粘贴到模态的body元素中。简而言之,只有在远程内容(href值)加载HTML或文本时才有意义。

您所看到的是预期的,因为如果您在文本编辑器中打开gif文件并将其粘贴到HTML标记中,则会发生同样的事情。

要让它以您想要的方式工作,href需要指向包含&lt; img&gt;的HTML文档。标签,用于在模态中引用所需的图像。

答案 2 :(得分:-1)

在马克罗布森的帖子中 - 将'this'改为'this.href':

$("#modal_img_target").attr("src", this);

=&GT;

$("#modal_img_target").attr("src", this.href);

(我没有评论的声誉)