一页上多个图像的模态

时间:2017-12-24 18:08:30

标签: javascript jquery image bootstrap-modal

*重复发布
我已经四处寻找并找到了为多个图像添加模式到一个页面的潜在答案。我找到的这个解决方案是给我模态,但是当模态弹出时,图像没有显示,控制台显示" img src"是"(未知)"。

我发现的解决方案:



$(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
});

<img id="1" data-toggle="modal" data-target="#myModal" class="image" src="/images/hieroglyphics/9.jpg">



<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img class="img-responsive" src=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

任何帮助将不胜感激!谢谢!

1 个答案:

答案 0 :(得分:1)

我可以确认您的代码似乎正常工作 这是你的代码的小提琴 https://jsfiddle.net/jammer99/y0w1t95u/

你确定没有其他东西打开模态吗?

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var image = $(e.relatedTarget).attr('src');
        $(".img-responsive").attr("src", image);
    });
});
你可以粘贴控制台的屏幕截图吗?检查是否有其他错误?