Question

我想打开显示用户点击图片的Modal。所以，我有许多类.image

的图像

<a href="#">
    <img data-toggle="modal" data-target="#modal_image" src="..." class="image thumbnail img-responsive">
</a>

我有modal：

<div class="modal fade" id="modal_image" tabindex="-1" role="dialog" aria-labelledby="modal_imagen" aria-hidden="true">
    <div class="modal-body">
        <img class = "image_modal" src="">
    </div>
</div>

还要遵循应该定义模态图像的JQuery代码：

$('.image').click(function(){
    var new_src = $(this).attr('src');
    $('#image_modal').attr('src', new_src);
});

但它不起作用。希望这不是一个愚蠢的错误，非常感谢你的帮助。

Answer 1

您可以尝试这样的事情（Live Demo）：

$('#modal_image').on('show.bs.modal', function (e) {
   var src = $(e.relatedTarget).attr('src');
   $(this).find('.modal-body > img.image_modal').attr('src', src);
});

在Bootstrap Website上查看更多内容：

关于 show.bs.modal 事件：

调用show instance方法时会立即触发此事件。   如果由单击引起，则单击的元素可用作   事件的 relatedTarget 属性。

Bootstrap模态。使用Jquery动态包含图像

1 个答案: