layer.open弹层查看缩略图的原图,自适应大小的实例
很多时候需要查看缩略图的原图,那么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弹层查看缩略图的原图,自适应大小的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
获取layer.open弹出层的返回值方法
正在开发的车联网项目用到了layer API.当我在开发"新建电子围栏"的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: layer.open({ type: 2, title: "设置围栏", shadeClose: true, shade: 0.4, area: ['90%', '90%'], content: "/ElectronicFence/Map?id=" +
-
layer.open弹层查看缩略图的原图,自适应大小的实例
很多时候需要查看缩略图的原图,那么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',
-
小巧强大的jquery layer弹窗弹层插件
先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格. [
-
jQuery、layer实现弹出层的打开、关闭功能
打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin
-
layer实现弹出层自动调节位置
项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现 layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导致我之前出现在ie下,调用iframeAuto后高度直接变零. 好了,做好了这一点之后,测试又提出一个问题,因为他是用小屏幕测试的,上面的位置没有变,弹出层变长以后按钮就被挤到下面去了.所以我需要做一个效果,在弹出层长度改变后重
-
在layer弹层layer.prompt中,修改placeholder的实现方法
如下所示: layer.prompt({title: '修改密码',placeholder:'请输入新密码'},function(val, index){ //成功后执行 }); 该修改的地方 layer.js 效果图 以上这篇在layer弹层layer.prompt中,修改placeholder的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
解决layer弹层遮罩挡住窗体的问题
使用代码: <div> <div>这里面某个按钮触发弹层<div> <div id='dialog' hidden='hidden'></div> </div> 如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素 content:$('#dialog') 那么这里弹出层,遮罩会遮住到弹窗导致操作不了. 官网给出的说法是 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下.不能放在d
-
javascript右下角弹层及自动隐藏(自己编写)
在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应用的自动弹层. 弹层示例图: 实现代码如下: Css样式: 复制代码 代码如下: /*通知提示层*/ .msg_info{ font-size: 12px; text-align: left; z-index: 100; position: absolute; display: none; bot
-
jQuery弹层插件jquery.fancybox.js用法实例
本文实例讲述了jQuery弹层插件jquery.fancybox.js用法.分享给大家供大家参考,具体如下: fancybox是jquery的插件,功能强大.支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,除了能展示层外,还可以展示iframed内容, 通过css订制样式.配合其他插件,能实现更旋的效果. 这里给出官方下载以及实例地址:http://fancyapps.com/fancybox/ 附带给出本站下载地址. 到目前为止,fancybox的最新版本2.1.5,调用方法
-
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
1.html代码片段 <div class="layui-input-inline"> <button type="button" οnclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button> </div> 注意:必须添加 type="button&qu
随机推荐
- Android Scroller及下拉刷新组件原理解析
- asp.net实现Postgresql快速写入/读取大量数据实例
- ajax的json传值方式在jsp页面中的应用
- 浅谈Java内存区域与对象创建过程
- PHP与SQL注入攻击[二]
- python中enumerate的用法实例解析
- android选择视频文件上传到后台服务器
- php checkdate、getdate等日期时间函数操作详解
- 纯js简单日历实现代码
- java统计字符串中指定元素出现次数方法
- shell脚本中28个特殊字符的作用简明总结
- 查找行中的第一个数据串
- php+ajax+json 详解及实例代码
- nginx配置文件详解中文版
- Android App使用RecyclerView实现上拉和下拉刷新的方法
- 分析Android多主题颜色的相关问题
- 浅谈spring ioc的注入方式及注入不同的数据类型
- 使用nodejs分离html文件里的js和css详解
- 超轻量级的js时间库miment使用解析
- Spring Boot系列教程之死信队列详解