layui两种弹窗示例

<script>
        layui.use(['table', 'form', 'jquery','common','laydate','layer'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
            let laydate = layui.laydate;
            var layer = layui.layer;
            let MODULE_PATH = "{$Request.root}/admin.user/";
            
            let cols = [
                [{
                        type: 'checkbox'
                    },{
                       field: "id",
                       title: "ID",
                       unresize: "true",
                       align: "center"
                   }, {
                       field: "openid",
                       title: "图片",
                       unresize: "true",
                       align: "center",
                        templet:function(row){
                        //return "<a onclick=''></a><button onclick=tanchuang('"+row.jiazhaoa+"')>查看</button>";
                          return "<a href='javascript:void(0);' onclick=clickruku('"+row.jiazhaoa+"')>审核</a>";
                       }
                   }
            ]]
                        
            table.render({
                elem: '#dataTable',
                url: MODULE_PATH + 'index',
                page: true,
                cols: cols,
                cellMinWidth: 100,
                skin: 'line',
                toolbar: '#toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });

            table.on('tool(dataTable)', function(obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                } else if (obj.event === 'edit') {
                    window.edit(obj);
                }
            });

            table.on('toolbar(dataTable)', function(obj) {
                if (obj.event === 'add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                } else if (obj.event === 'recycle') {
                    window.recycle(obj);
                }
            });

            form.on('submit(query)', function(data) {
                table.reload('dataTable', {
                    where: data.field,
                    page:{curr: 1}
                })
                
                return false;
            });
            
           form.on("switch(status)", function(data) {
               var status = data.elem.checked?1:2;
               var id = this.value;
               var load = layer.load();
               $.post(MODULE_PATH + "status",{status:status,id:id},function (res) {
                   layer.close(load);
                   //判断有没有权限
                   if(res && res.code==999){
                       layer.msg(res.msg, {
                           icon: 5,
                           time: 2000, 
                       })
                       return false;
                   }else if (res.code==200){
                       layer.msg(res.msg,{icon:1,time:1500})
                   } else {
                       layer.msg(res.msg,{icon:2,time:1500},function () {
                           $(data.elem).prop("checked",!$(data.elem).prop("checked"));
                           form.render()
                       })
                   }
               })
           });
            
            // 弹窗展示
            window.clickruku=function(path){
                layer.open({
                      type: 1,  //类型：1（页面），2（iframe），3（layer层），4（tips层）
                      title: '查看物流',
                      anim: 0,
                      btn: ['关闭'],
                      shadeClose: false, //点击遮罩关闭层
                      area : ['80%','100%'],//弹出框大小
                      shift:1,//弹出框动画效果
                      content: '<img src="'+path+'" alt="图片" style="max-width:100%;max-height:100%;display:block;margin:auto;">',
                      success: function (layer, index){
                          console.log(layer)
                      }
                });
            }
         })
         
         // 弹窗展示
         function tanchuang(path){
            // 在layer中打开图片，可以是静态图片地址或者动态地址
            layer.open({
              type: 1, // 类型：1（页面），2（iframe），3（layer层），4（tips层）
              title: false, // 是否显示标题栏
              closeBtn: 0, // 关闭按钮
              area: '300px', // 弹出层的尺寸
              shadeClose: true, // 是否点击遮罩关闭
              content: '<img src="'+path+'" alt="图片" style="max-width:100%;max-height:100%;display:block;margin:auto;">' // 图片的HTML代码
            });
        }
</script>