前言

若依(ruoyi)： v4.3

点击图标查看图片

使用 layer 实现。若依(ruoyi) v4.3 中带来 layer 插件，直接使用即可。

html 代码

<div class="form-group">    <label class="col-sm-3 control-label">发车里程：</label><div class="col-sm-8"><div class="input-group"><input name="sendmileage" th:value="${data.sendmileage}" class="form-control" type="text" disabled="disabled"><span class="input-group-addon" id="showSendImage" th:attr="data-url=${data.sendimage}"><i class="fa fa-file-image-o"></i></span></div></div>
</div>

javascript 代码

<script th:inline="javascript">$("#showSendImage").click(function(){let url = $(this).data('url');showImage(`<img alt="x" src='${url}'>`);});function showImage(content){layer.open({type: 1,title: false //不显示标题栏,shadeClose : true //点击遮罩时关闭,area: ['auto', 'auto'],shade: 0.8,id: 'LAY_showImage_001' //设定一个id，防止重复弹出,moveType: 1 //拖拽模式，0或者1,content: content});}
</script>

运行结果：

参考

https://www.layui.com/doc/modules/layer.html
https://layer.layui.com/

【若依(ruoyi)】点击图标查看图片相关推荐

点击图标查看对应的魔法表情
点击图标查看对应的魔法表情
win7文件夹中的图片使用“XX图标”查看模式显示时，无法正常显示图片缩略图
win7文件夹中的图片使用"XX图标"查看模式显示时,无法正常显示图片缩略图系统: win7 详细症状描述: 进入含有图片的文件夹,选择"查看"菜单栏中的&q ...
android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
前言用TextView显示Html图文,每一个需求都是需要探索的,不再是简单的添加点击事件就可以了. 1.如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数:Html.T ...
iOS开发点击查看图片详情并可缩放拖拽图片长按图片下载
由图片缩略图进入查看图片原图页面,并可对图片进行缩放(最小不小于原图,最大不大于三倍原图),长按可保存到本地相册或者查看原图. 1)缩略图页面: 2)点击查看原图页面代码部分: 1.初始化图片背景跟 ...
android仿微信头像点击放大查看,仿微信查看图片（带大小图切换查看）
之前一直想仿微信朋友圈那样做个图片查看,但是看了网上很多demo都觉得比较简单,少了从小图切换到大图的加载过程,都只是在所有预览里加载大图,点击进去也是加载大图,于是在网上下载了别人的demo自己修改 ...
JavaFx+JFoenix 点击翻页按钮查看图片
JavaFx+JFoenix 点击翻页按钮查看图片 1. 前言实现一个小Demo,通过点击翻页按钮,实现循环查看每一张图片.当查看到最后一张图片后,再次点击按钮查看第一张图片,开始下一轮循环. 1. ...
点击查看图片---弹窗直接显示图片并带关闭按钮
做项目,有时候查看图片要直接跳转到一个新的页面,在显示图片.这样用户体验效果不好. 采用该方法,直接在当前页面分层弹窗并显示图片,体验效果大大提升! 采用Magnific Popup – 响应式 jQ ...
win10 点击任务栏图片输入法图标变动
原因: win10支持不同的应用使用不同的输入法,点击通知栏图标时,当前应用跟目标应用不一致会导致语言栏切换. 这样切换会导致不太好点击通知图标.这样体验很难受,每次点击图标都会偏移一下. 解决办法: ...
Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘
添加标绘之前要明白一点:Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象,或者说Cesium 提供 Entity API 来绘制控件数据.所以我们添加的所有标绘都是e ...

【若依(ruoyi)】点击图标查看图片

前言

点击图标查看图片

参考

【若依(ruoyi)】点击图标查看图片相关推荐

最新文章

热门文章