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 相关文章推荐
Js注册协议倒计时的小例子
Jun 24 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
基于mysql的论坛(4)
2006/10/09 PHP
使用php清除bom示例
2014/03/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python 远程统计文件代码分享
2015/05/14 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
工资证明格式模板
2015/06/12 职场文书
教师节校长致辞
2015/07/31 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android