layer.open弹层查看缩略图的原图,自适应大小的实例


Posted in Javascript onSeptember 05, 2019

很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择

直接上代码

//查看原图
 function showImg(url){
 //alert(url);
 var img_infor = "<img src='" + url + "' />";
 layer.open({  
     type: 1, 
     closeBtn: 1,
     shade: false,  
     title: false, //不显示标题
     //skin: 'layui-layer-nobg', //没有背景色
     shadeClose: false,
     area:['auto','auto'],  
     //area: [img.width + 'px', img.height+'px'],  
     content: img_infor //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
     //cancel: function () {  
       //layer.msg('图片查看结束!', { time: 5000, icon: 6 });  
     //}  
   });  

 }

前提是要知道img的src

好了,ok!

以上这篇layer.open弹层查看缩略图的原图,自适应大小的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 #Javascript
layer.js open 隐藏滚动条的例子
Sep 05 #Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 #Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 #Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 #Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 #Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 #Javascript
You might like
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php 执行系统命令的方法
2009/07/07 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python开发中module模块用法实例分析
2015/11/12 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python使用turtle库绘制树
2018/06/25 Python
python实现周期方波信号频谱图
2018/07/21 Python
python 对key为时间的dict排序方法
2018/10/17 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
毕业生个人求职的自我评价
2013/10/28 职场文书
小学门卫岗位职责
2013/12/17 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
保外就医申请书范文
2015/08/06 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript