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弹层查看缩略图的原图,自适应大小的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 获取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右下角弹层及自动隐藏(自己编写)

    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

随机推荐