js实现点击图片在弹窗中放大

提示：本文是在前文的基础之上进行的修改

---

前言

 前文实现效果(被骂了，说要在弹窗中实现，而不是单纯的放大，影响界面美观)
前文链接：https://blog.csdn.net/weixin_46300114/article/details/131897239

---

1:首先，在HTML文件中创建一个空的弹窗容器，用于展示图片和关闭按钮。可以使用一个<div>元素，并给它一个唯一的ID，例如"imagePopup"。

js代码如下（示例）：

// 显示弹窗
function toggleImageSize(url) {
    var popup = document.getElementById('imagePopup');
    var image = popup.getElementsByTagName('img')[0];
    image.src = url;
    popup.style.display = 'block';
}

//关闭弹窗
function closePopup() {
    var popup = document.getElementById('imagePopup');
    popup.style.display = 'none';
}

2:修改原来的代码，将点击事件绑定到添加了参数的toggleImageSize方法上，并将图片的URL作为参数传递进去。

{
    field: 'certAddress1',
    title: '证件正面',
    formatter: function(value, row, index) {
        return '<img src="' + row.certAddress1 + '" onclick="toggleImageSize(\'' + row.certAddress1 + '\');" style="width: 1in; height: 1in;">';
    }
}

 

3:在弹窗容器中添加展示图片的<img>元素和关闭按钮。 

 html代码如下（示例）：

<!--            弹窗容器-->
            <div id="imagePopup" style="display: none; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%);">
                <img id="popupImage" src="" style="width: 6in; height: 6in;">
                <span id="closeButton" onclick="closePopup();" style="position: absolute; top: 0; right: 0; background-color: #fff; color:black; padding: 5px;"><strong>X</strong></span>
            </div>

2.实现效果

点击一下：

---

 点击右上角的“X”可以关闭弹窗

总结

作为一名入行1年的初初初级java程序员前端是真的很差(以前只负责写接口不用写前端，现在前端老哥跑路了，公司暂时也没有招募前端人员)只能自己慢慢摸索，这两天有时间将这个小功能记录一下（PS:公司用的若依前后端不分离框架进行二次开发）