Javascript 我如何创建一个包含图像的模态，模态的链接是图像本身（在较小的版本上））

我想在缩略图库中显示一些图像，如果在其中单击某个图像，它将在模式中显示得更大

如果我将模态的链接保留为图像，那么除了右上角的关闭标志外，它不会在页眉或页脚显示任何内容

---

我正在使用引导。我还想知道我是否可以将

img

标记替换为

您可以仅使用引导来完成，但这似乎对您想要做的事情有所帮助：

我在我的几个网站上使用这个插件就是为了解决这个问题。
试试这个插件会对你有所帮助。
检查。
使用图像并将其传递给modal

剧本

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var img = $(e.relatedTarget).attr('src'); // get image
        $('#showimg').attr('src' , img); //load image in modal
    });
});

将
id=“showimg”
添加到图像标签



是的，您也可以使用


事件侦听器脚本将

$（文档）.ready（函数（）{
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var img=$（e.relatedTarget）.attr（'href'）；//使用

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var img = $(e.relatedTarget).attr('src'); // get image
        $('#showimg').attr('src' , img); //load image in modal
    });
});

<div class="modal-body">
    <img class="img-responsive" src="" alt="" id="showimg">
</div>

<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a>

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var img = $(e.relatedTarget).attr('href'); // get image with <a> tag
        $('#showimg').attr('src' , img); //load image in modal
    });
});