多窗口模式,层叠置顶 配置一个透明的询问框 示范一个公告层 上弹出 右弹出 下弹出 左弹出 左上弹出 左下弹出 右上弹出 右下弹出 居中弹出

Tips:为了更清晰演示,每触发上述一个例子之前,都会关闭所有已经演示的层

//多窗口模式,层叠置顶 layer.open({ type: 2 //此处以iframe举例 ,title: '当你选择该窗体时,即会在最顶端' ,area: ['390px', '330px'] ,shade: 0 ,offset: [ //为了演示,随机坐标 Math.random()*($(window).height()-300) ,Math.random()*($(window).width()-390) ] ,maxmin: true ,content: 'settop.html' ,btn: ['继续弹出', '全部关闭'] //只是为了演示 ,yes: function(){ $(that).click(); //此处只是为了演示,实际使用可以剔除 } ,btn2: function(){ layer.closeAll(); } ,zIndex: layer.zIndex //重点1 ,success: function(layero){ layer.setTop(layero); //重点2 } });

//配置一个透明的询问框 layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', { time: 20000, //20s后自动关闭 btn: ['明白了', '知道了', '哦'] });

//示范一个公告层 layer.open({ type: 1 ,title: false //不显示标题栏 ,closeBtn: false ,area: '300px;' ,shade: 0.8 ,id: 'LAY_layuipro' //设定一个id,防止重复弹出 ,resize: false ,btn: ['火速围观', '残忍拒绝'] ,btnAlign: 'c' ,moveType: 1 //拖拽模式,0或者1 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'https://www.layui.fans/' ,target: '_blank' }); } }); //边缘弹出 layer.open({ type: 1 ,offset: 't' //具体配置参考:offset参数项 ,content: '<div style="padding: 20px 80px;">内容</div>' ,btn: '关闭全部' ,btnAlign: 'c' //按钮居中 ,shade: 0 //不显示遮罩 ,yes: function(){ layer.closeAll(); } });