layui放大图片

项目结构

1、编写html代码

 <div style="margin:200px;">
     <img  onclick="bigger()" src="img/abc.png">
  </div>

2、引入相关文件

<script src="js/layui/layui.all.js"></script>

3、编写方法

<script type="text/javascript">
    function  bigger(){
        layer.open({
            type: 1, //基本层类型
            title: false, //没有标题
            /* closeBtn: 0,  //没有右上角的X*/
            area: ['614px','506px'], //弹窗层的宽、高
            shadeClose: true, //点击遮罩是否关闭
            content: "<img width='100%;' src='img/abc.png' />"
        });
    }
</script>

4、效果