一页上多个图像的模态

Question

*重复发布 我已经四处寻找并找到了为多个图像添加模态到一个页面的潜在答案。我找到的这个解决方案是给我模态，但是当模态弹出时图像没有显示，显示“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>

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

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

你可以粘贴控制台的屏幕截图吗？检查是否还有其他错误？