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

发布时间：2020-12-17 21:32:42 所属栏目：安全来源：网络整理

导读：我想打开一个显示用户点击图像的模态.所以,我有很多类.image的图像 a href="#" img data-toggle="modal" data-target="#modal_image" src="..." class="image thumbnail img-responsive"/a 我有一个模态： div class="modal fade" id="modal_image" tabindex

我想打开一个显示用户点击图像的模态.所以,我有很多类.image的图像

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

我有一个模态：

<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);
});

但它没有用.希望这不是一个愚蠢的错误,非常感谢你的帮助.

解决方法

你可以试试这样的东西( 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的更多信息：

About show.bs.modal event:

This event fires immediately when the show instance method is called.
If caused by a click,the clicked element is available as the
relatedTarget property of the event.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!