Javascript 如何在单击图像后在屏幕上弹出图像

在我的代码中，表中有很多图像。我想点击一张照片&然后照片会在屏幕上以大尺寸弹出。但是我对javascript和jquery不太了解。我试图这样做，但问题是它弹出一个框，但不显示图片。我知道在展示图片的脚本中有一个问题。你能告诉我哪里是错误的或给我一个正确的代码后，点击弹出图像

我的标题链接在下面。是否需要添加任何其他链接

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>

以下是html部分：

<div>
    <td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>

">

下面是javascript：

<script type="text/javascript">
    function popup() {
        w2popup.open({
            title: 'Image',
            body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
        });
    }
</script>

函数popup（）{
w2popup.open({
标题：“图像”，
正文：““>”
});
}

---

谁能帮助我如何在弹出框中显示图像。提前感谢。

请将您的jquery替换为以下任何尝试：

<script type="text/javascript">
    function popup() {
       var image = $(this).attr('src');
        w2popup.open({
            title: 'Image',
            body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
        });
    }
</script>

函数popup（）{
var image=$（this.attr（'src'）；
w2popup.open({
标题：“图像”，
正文：“”
});
}

---

我假设图像显示正确，您将单击以以下任何方式替换jquery：

<script type="text/javascript">
    function popup() {
       var image = $(this).attr('src');
        w2popup.open({
            title: 'Image',
            body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
        });
    }
</script>

函数popup（）{
var image=$（this.attr（'src'）；
w2popup.open({
标题：“图像”，
正文：“”
});
}

---

我假设图像显示正确，您可以单击它。我建议您使用Jack Moore的Colorbox。它使用JQuery，并且非常可定制

配色箱：

演示：

如果你不反对使用PHP，你也可以去UberGallery看看。它在内部使用colorbox，可以简单地与

---

我建议使用Jack Moore的Colorbox。它使用JQuery，并且非常可定制

配色箱：

演示：

如果你不反对使用PHP，你也可以去UberGallery看看。它在内部使用colorbox，可以简单地与

---

当DOM就绪时，您可以为img分配一个类

popup\u image

，并附加一个单击处理程序，而不是

onclick

属性

我冒昧地删除了演示结果所不需要的脚本和标记

$（文档）.ready（函数（）{
$（“.popup_image”）。在（'click'，function（）上{
w2popup.open({
标题：“图像”，
正文：“”
});
});
});
当DOM就绪时，您可以为img分配一个类
popup\u image
，并附加一个单击处理程序，而不是
onclick
属性

我冒昧地删除了演示结果所不需要的脚本和标记


$（文档）.ready（函数（）{
$（“.popup_image”）。在（'click'，function（）上{
w2popup.open({
标题：“图像”，
正文：“”
});
});
});

哦，太好了。。。谢谢。它起作用了。你能告诉我如何放大脚本中弹出图像的大小吗？嗯，你想放大什么，弹出窗口还是弹出窗口中的图像？你可以给弹出选项一个高度/宽度属性：-或者如果你想操纵图像，你可以在弹出的主体中为你的
添加一个样式属性。哦，太好了。。。谢谢。它起作用了。你能告诉我如何放大脚本中弹出图像的大小吗？嗯，你想放大什么，弹出窗口还是弹出窗口中的图像？您可以为弹出选项提供一个高度/宽度属性：-或者，如果您想操作图像，您可以向弹出框主体中的
添加一个样式属性。