Layui layer.open 弹出层 图片(在列表中点击方大查看图片)


------------------------------------toolbar
 <script type="text/html" id="imgDemo">
    <img src="{{d.goods_img}}" width="100%" onclick='previewImg(this)'>
  </script>

------------------------layui-table

<th lay-options="{field:'goods_img', width:90, toolbar: '#imgDemo'}"> 图片</th>

---------------------------js
<script>
    function previewImg(obj) {
      var img = new Image();
      img.src = obj.src;
      var height = img.height; //获取图片高度
      var width = img.width; //获取图片宽度
      if (height > 1000 || width > 800) {
        height = height / 1.5;
        width = width / 1.5;
      }
      var imgHtml = "<img src='" + obj.src + "' style='width: " + width + "px;height:" + height + "px'/>";
      layer.open({
        type: 1,
        offset: 'auto',
        area: [width + 'px', height + 'px'],
        shadeClose: true,//点击外围关闭弹窗
        scrollbar: true,//不现实滚动条
        title: false, //不显示标题
        content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
        cancel: function () {
  
        }
      });
    }
  </script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值